CoursesFAQ

Introduction to HTML

This comprehensive course introduces students to the fundamental building blocks of HTML (Hypertext Markup Language). Designed for beginners, it covers essential concepts and practical applications of HTML elements, providing a solid foundation for web development.

Introduction to HTML Elements

HTML (Hypertext Markup Language) is the backbone of web development. It provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript. Think of HTML as the skeleton of a web page, defining elements like headings, paragraphs, links, images, and forms. In this section, we'll explore these elements, the fundamental building blocks of HTML.

HTML elements are the individual components that make up an HTML document. They are represented by tags, which are enclosed in angle brackets < >. Most elements have an opening tag and a closing tag, with content in between. For example:

<p>This is a paragraph.</p>

Here, <p> is the opening tag, </p> is the closing tag, and "This is a paragraph" is the content.

Semantic Tags

Semantic tags are HTML elements that carry meaning about the structure of your web page. They help both browsers and developers understand the purpose of different parts of your content. Some common semantic tags include:

  • <header>: Represents introductory content or a group of navigational aids.
  • <nav>: Contains navigation links.
  • <main>: Represents the main content of the document.
  • <article>: Represents a self-contained composition in a document.
  • <section>: Represents a standalone section of content.
  • <aside>: Represents content tangentially related to the content around it.
  • <footer>: Represents a footer for its nearest sectioning content or sectioning root element.

Using semantic tags improves accessibility, SEO, and makes your HTML more meaningful and easier to understand.

The HTML Tag

The <html> tag is the root element of an HTML page. It encapsulates all other elements and tells the browser that this is an HTML document. Here's where it's used in the HTML code:

<!DOCTYPE html>
<html lang="en">
  <!-- All other HTML elements go here -->
</html>

The lang attribute, although not strictly required, specifies the language of the document, which is important for accessibility and search engines.

Document Structure

A basic HTML document structure looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata goes here -->
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>
  • The <!DOCTYPE html> declaration defines this document as HTML5.
  • The <head> element contains metadata about the document.
  • The <body> element contains the visible content of the page.
  • Note how each of the tags are closed after their use

Contents of the Head Tag

The <head> tag contains metadata about the HTML document. This information is not displayed on the page but is crucial for proper rendering and functionality. Common elements found in the <head> include:

  • <title>: Sets the title of the page (displayed in the browser tab).
  • <meta>: Provides metadata about the HTML document.
  • <link>: Links to external resources like CSS stylesheets.
  • <script>: Includes JavaScript files or inline scripts.

Example:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Web Page</title>
  <link rel="stylesheet" href="styles.css" />
  <script src="script.js"></script>
</head>

Block and Inline Elements

HTML elements are typically classified as either block-level or inline elements.

Block-level Elements

Block-level elements start on a new line and take up the full width available. They create "blocks" in the document flow. Examples include:

  • <div>: A generic container for flow content.
  • <p>: Represents a paragraph.
  • <h1> to <h6>: Heading elements of different levels.
  • <ul> and <ol>: Unordered (bullet points) and ordered (numbered) lists.
  • <li>: Used to represent list items in an unordered or ordered list.

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary. They flow within the text content. Examples include:

  • <span>: A generic inline container.
  • <a>: Creates a hyperlink.
  • <strong> and <em>: Represent strong importance and emphasis, respectively.

Here's an example showcasing both block and inline elements:

<div>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph with <span style="color: blue;">some blue text</span> inside it.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

Adding Media to HTML Pages

HTML allows you to embed various types of media in your web pages, enhancing the user experience and conveying information more effectively.

Images

The <img> tag is used to embed images. It's a self-closing tag and requires the src attribute to specify the image source, whether it's a local file or an external URL:

<img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="A beautiful landscape" />

The alt attribute provides alternative text for screen readers and is displayed if the image fails to load.

Audio and Video

HTML5 introduced the <audio> and <video> elements for embedding media:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="https://rr5---sn-ab5sznzk.googlevideo.com/videoplayback?expire=1719803617&ei=gcqBZpTbD7GHkucPhtW3qAQ&ip=191.102.187.243&id=o-AIkTguEOHPmFrVSR2rzrr13KiL_I4XuFgzRUQuWppAbN&itag=18&source=youtube&requiressl=yes&xpc=EgVo2aDSNQ%3D%3D&pcm2=no&gcr=us&bui=AbKP-1PGQoGvo7onJ9zO8tOA6t6UXGTnjZlSYwDpo9uCa2l4b_1s1tWCDZmX3YJKBsW0CIyTgcpx5zeL&spc=UWF9fx1kVhA6xzYAEvFtwnwKbpsJDUYVH8mo---o1dp5_-ZxRPAPGJ3OpIrt&vprv=1&svpuc=1&mime=video%2Fmp4&ns=yipeL2TQjxz8ekXwoXqKB2IQ&rqh=1&gir=yes&clen=75056830&ratebypass=yes&dur=817.412&lmt=1714826470620860&c=WEB&sefc=1&txp=4538434&n=ncajFayx-5DCqw&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cxpc%2Cpcm2%2Cgcr%2Cbui%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Cns%2Crqh%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=AJfQdSswRQIgQ-htXYelkNDUWQahy1qQGjRrSpxxCYHE09L7LHfnJ08CIQDzJRmiJMX8-3O8RGtXl_XlqLLpMhrI4qvCQ45s41rVeA%3D%3D&title=UFC+Pereira+VS+Adesanya+2+Full+Fight+Brutal+KO%26%23039%3BS+-+MMA+Fighter&rm=sn-ab5ely7z,sn-jvhj5nu-2iae7e&fexp=24350457,24350517&req_id=5dca369ab562a3ee&ipbypass=yes&redirect_counter=2&cms_redirect=yes&cmsv=e&mh=DC&mip=144.118.77.109&mm=29&mn=sn-ab5sznzk&ms=rdu&mt=1719781736&mv=m&mvi=5&pl=16&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AHlkHjAwRQIgLr9zHbUZJdU36i4ZmgRqSW-yF431P5FT7q88o53OYhICIQC3C0zddtdjAtBo3sU_RGkLifa-PNnrPo2ja1iwUR3idA%3D%3D" type="video/mp4">
  An example video of "Adesanya vs Pereira 2"
</video>

iFrames

The <iframe> element allows you to embed another HTML page within the current page:

<iframe src="https://www.example.com" width="500" height="300"></iframe>

Comments

Comments are various blocks of text that are not displayed in the browser, but they can be useful for organizing your code and for explaining your code to other developers. To make a comment in HTML, you can use the <!-- and --> tags:

<!-- This is a comment -->

When this is run, it would not be displayed in the browser.

Favicon

A favicon is a small icon that appears in the browser tab next to the page title. It helps users identify your website and enhances its professional appearance. Here's how to add a favicon:

<link rel="icon" href="path/to/favicon.ico" type="image/x-icon">

Tables

HTML tables are used to display data in rows and columns. The main elements used in creating tables are:

  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header cell.
  • <td>: Defines a table data cell.

Here's an example of a simple table:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

You can use the colspan and rowspan attributes to make cells span multiple columns or rows:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td colspan=3>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td colspan=3>Centro Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Forms

HTML forms are used to collect user input. They are created using the <form> element and can contain various types of input elements.

Basic Form Structure

<form action="/submit-form" method="post">
  <!-- Form elements go here -->
</form>

The action attribute specifies where to send the form data when submitted, and the method attribute specifies the HTTP method to use.

Detailed Form Elements

When creating forms, it's important to understand the purpose of each element:

  • <input type="text">: For single-line text input.
  • <input type="email">: Specifically for email addresses, includes validation.
  • <input type="password">: Hides text input for privacy.
  • <textarea>: For multi-line text input.
  • <button>: To submit forms or trigger actions.
  • <select>: Provides a dropdown list.
  • <option>: Defines options within a select dropdown. Each input type can be further customized with attributes like placeholder, required, autofocus, and disabled to enhance user experience.

Input Types

HTML5 introduced many new input types to make form creation easier and more semantic:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>
  
  <label>Gender:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>
  
  <label for="newsletter">Subscribe to newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter"><br><br>
  
  <label for="comments">Comments:</label><br>
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>
  
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

This example showcases various input types including text, email, password, radio buttons, checkboxes, and textarea. The <label>elements are used to provide labels for the inputs, which is important for accessibility.

Conclusion

This introduction to HTML covers the fundamental concepts you need to start building web pages. Remember, HTML provides the structure and content of your web pages. As you progress, you'll learn how to style these elements with CSS and add interactivity with JavaScript.