HTML Basics

Learn the fundamental building blocks of web pages and how to structure content for the web.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using a series of elements that tell the browser how to display the content.

Key Concepts

  • Elements: The building blocks of HTML pages, represented by tags
  • Tags: Labels that define elements, usually come in pairs (opening and closing)
  • Attributes: Additional information about elements
  • Nesting: Placing elements inside other elements

HTML Document Structure

Every HTML document follows a basic structure that includes several required elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

<!DOCTYPE html> - Declares the document type and HTML version

<html> - The root element that contains all other HTML elements

<head> - Contains meta-information about the document

<meta> - Provides metadata about the HTML document

<title> - Specifies the title of the document (shown in browser tab)

<body> - Contains the visible content of the page

Common HTML Elements

Text Elements

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

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

<strong>Bold text</strong> or <b>Bold text</b>
<em>Italic text</em> or <i>Italic text</i>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub> and <sup>Superscript</sup>

Lists

<!-- Unordered List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<!-- Definition List -->
<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
    <dt>Another term</dt>
    <dd>Another definition</dd>
</dl>

Links and Images

<!-- Links -->
<a href="https://example.com">Link text</a>
<a href="about.html">Internal link</a>
<a href="mailto:email@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="#section-id">Jump to section</a>

<!-- Images -->
<img src="image.jpg" alt="Description of image">
<img src="image.jpg" alt="Description" width="300" height="200">

<!-- Figure with caption -->
<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Caption for the image</figcaption>
</figure>

Tables

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Footer spans two columns</td>
        </tr>
    </tfoot>
</table>

Semantic HTML

Semantic HTML uses tags that convey meaning about the content they contain, making web pages more accessible and SEO-friendly.

Semantic Elements

<header>Site or section header</header>
<nav>Navigation links</nav>
<main>Main content of the page</main>
<article>Self-contained content</article>
<section>Thematic grouping of content</section>
<aside>Related but tangential content</aside>
<footer>Site or section footer</footer>
<figure>Self-contained content with optional caption</figure>
<figcaption>Caption for a figure</figcaption>
<time datetime="2023-05-16">May 16, 2023</time>

Using semantic elements helps:

  • Screen readers and assistive technologies understand your content
  • Search engines better index your pages
  • Developers maintain cleaner, more meaningful code

Non-Semantic vs. Semantic Example

Non-Semantic Approach:

<div class="header">
    <div class="logo">My Website</div>
    <div class="nav">
        <div class="nav-item">Home</div>
        <div class="nav-item">About</div>
    </div>
</div>
<div class="main-content">
    <div class="article">
        <div class="article-title">Article Title</div>
        <div class="article-content">Content here...</div>
    </div>
</div>
<div class="footer">Copyright 2023</div>

Semantic Approach:

<header>
    <div class="logo">My Website</div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h1>Article Title</h1>
        <p>Content here...</p>
    </article>
</main>
<footer>Copyright 2023</footer>

Forms and Inputs

HTML forms allow users to input data that can be sent to a server for processing.

Basic Form Structure

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

Common Attributes:

  • action: URL where form data is sent
  • method: HTTP method (get or post)
  • enctype: How form data is encoded when submitted

Input Types

<!-- Text inputs -->
<input type="text" name="username" placeholder="Enter username">
<input type="password" name="password" placeholder="Enter password">
<input type="email" name="email" placeholder="Enter email">
<input type="number" name="age" min="18" max="100">
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="url" name="website">
<textarea name="message" rows="4" cols="50">Default text</textarea>

<!-- Selection inputs -->
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>

<select name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

<!-- Date and time inputs -->
<input type="date" name="birthdate">
<input type="time" name="meeting-time">
<input type="datetime-local" name="event-time">
<input type="month" name="start-month">
<input type="week" name="vacation-week">

<!-- Other inputs -->
<input type="color" name="favorite-color">
<input type="range" name="rating" min="1" max="10">
<input type="file" name="document">
<input type="hidden" name="user-id" value="12345">

Form Validation

HTML5 provides built-in form validation features:

<!-- Required fields -->
<input type="text" name="username" required>

<!-- Pattern matching with regular expressions -->
<input type="text" name="zipcode" pattern="[0-9]{5}" title="Five digit zip code">

<!-- Min and max values -->
<input type="number" name="age" min="18" max="100">

<!-- Min and max length -->
<input type="text" name="username" minlength="3" maxlength="20">

HTML Best Practices

Coding Standards

  • Always use lowercase for HTML element names, attributes, and values
  • Close all HTML elements, even void elements (e.g., <img />)
  • Use quotation marks around attribute values
  • Specify the alt attribute for all images
  • Declare the document type with <!DOCTYPE html>
  • Use semantic elements whenever possible
  • Include the lang attribute in the html element
  • Use proper indentation for nested elements

Accessibility

Making your HTML accessible ensures that all users, including those with disabilities, can use your website:

  • Use semantic HTML elements
  • Provide descriptive alt text for images
  • Use heading elements (<h1> to <h6>) in the correct order
  • Associate form labels with inputs using the for attribute
  • Ensure sufficient color contrast
  • Make sure your site is keyboard navigable
  • Use ARIA attributes when necessary

SEO Considerations

  • Use a descriptive <title> element
  • Include meta description
  • Use heading tags appropriately
  • Optimize image alt attributes
  • Create descriptive link text
  • Use semantic HTML
  • Ensure your site is mobile-friendly

Next Steps

Now that you understand the basics of HTML, you're ready to:

Continue Learning

Move on to CSS Basics to learn how to style your HTML content and create visually appealing web pages.

Practice Your Skills

Check out our Projects section for hands-on exercises to reinforce what you've learned.