HTML Intermediate (Part 1)

Learn more complex HTML structures, forms, tables, and semantic elements

HTML Intermediate Content

This content has been divided into three parts for better readability:

Semantic HTML

Semantic HTML introduces meaning to the web page rather than just presentation. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.

Benefits of Semantic HTML

  • Accessibility - Screen readers and other assistive technologies can better understand the content
  • SEO - Search engines can better understand the content and its importance
  • Maintainability - Code is easier to read and maintain
  • Reusability - Content can be more easily repurposed for different devices and platforms

Semantic Elements

HTML introduced several semantic elements that provide meaning to the structure of a web page:

Element Description
<header> Represents a container for introductory content or a set of navigational links
<nav> Defines a section of navigation links
<main> Specifies the main content of a document
<article> Defines an independent, self-contained content
<section> Defines a section in a document
<aside> Defines content aside from the content it is placed in
<footer> Defines a footer for a document or section
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<time> Defines a date/time
<mark> Defines marked or highlighted text
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element

Semantic Structure Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Latest News</h2>
            <article>
                <h3>Article Title</h3>
                <p>Article content goes here...</p>
                <time datetime="2025-03-15">March 15, 2025</time>
                <figure>
                    <img src="image.jpg" alt="Description">
                    <figcaption>Figure Caption</figcaption>
                </figure>
            </article>
        </section>
        
        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2025 Website Name. All rights reserved.</p>
    </footer>
</body>
</html>

Non-Semantic vs. Semantic HTML

Let's compare non-semantic and semantic HTML:

/* Non-Semantic HTML */
<div class="header">
    <h1>Website Title</h1>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</div>

<div class="main">
    <div class="section">
        <h2>Section Title</h2>
        <div class="article">
            <h3>Article Title</h3>
            <p>Article content...</p>
        </div>
    </div>
    <div class="sidebar">
        <h3>Sidebar Title</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
        </ul>
    </div>
</div>

<div class="footer">
    <p>Copyright 2025</p>
</div>

/* Semantic HTML */
<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>Section Title</h2>
        <article>
            <h3>Article Title</h3>
            <p>Article content...</p>
        </article>
    </section>
    <aside>
        <h3>Sidebar Title</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>Copyright 2025</p>
</footer>

The semantic version clearly communicates the purpose of each section, making it easier for browsers, search engines, and assistive technologies to understand the content.

HTML Forms

HTML forms are used to collect user input. The <form> element defines a form that contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Form Structure

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

The action attribute specifies where to send the form data when a form is submitted. The method attribute specifies the HTTP method to use when sending form data (GET or POST).

Form Elements

Element Description Example
<input> Defines an input control <input type="text" name="username">
<label> Defines a label for an input element <label for="username">Username:</label>
<select> Defines a drop-down list <select name="country"><option>USA</option></select>
<textarea> Defines a multi-line input control <textarea name="message" rows="4" cols="50"></textarea>
<button> Defines a clickable button <button type="submit">Submit</button>
<fieldset> Groups related elements in a form <fieldset><legend>Personal Info</legend>...</fieldset>
<legend> Defines a caption for a fieldset element <legend>Personal Info</legend>
<datalist> Specifies a list of pre-defined options for input controls <datalist id="browsers"><option value="Chrome"></datalist>
<output> Represents the result of a calculation <output name="result">0</output>

Input Types

The <input> element can be displayed in several ways, depending on the type attribute.

Type Description Example
text Defines a single-line text input field <input type="text" name="username">
password Defines a password field <input type="password" name="password">
submit Defines a submit button <input type="submit" value="Submit">
reset Defines a reset button <input type="reset" value="Reset">
radio Defines a radio button <input type="radio" name="gender" value="male">
checkbox Defines a checkbox <input type="checkbox" name="vehicle" value="Bike">
button Defines a button <input type="button" value="Click Me">
color Defines a color picker <input type="color" name="favcolor">
date Defines a date control <input type="date" name="birthday">
email Defines a field for an e-mail address <input type="email" name="email">
file Defines a file-select field and a "Browse" button <input type="file" name="myfile">
number Defines a field for entering a number <input type="number" name="quantity" min="1" max="5">
range Defines a control for entering a number within a range <input type="range" name="points" min="0" max="10">
search Defines a text field for entering a search string <input type="search" name="search">
tel Defines a field for entering a telephone number <input type="tel" name="phone">
time Defines a control for entering a time <input type="time" name="appt">
url Defines a field for entering a URL <input type="url" name="homepage">

Form Attributes

HTML introduced several attributes for form validation and user experience improvement:

Attribute Description Example
required Specifies that an input field must be filled out <input type="text" required>
placeholder Specifies a short hint that describes the expected value <input type="text" placeholder="Username">
pattern Specifies a regular expression that the input value is checked against <input type="text" pattern="[A-Za-z]{3}">
min and max Specifies the minimum and maximum values for an input field <input type="number" min="1" max="5">
step Specifies the legal number intervals for an input field <input type="number" step="0.5">
autofocus Specifies that an input field should automatically get focus when the page loads <input type="text" autofocus>
autocomplete Specifies whether a form or input field should have autocomplete on or off <input type="text" autocomplete="off">
multiple Specifies that the user is allowed to enter more than one value <input type="file" multiple>

Complete Form Example

<form action="/submit-form" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div>
            <label for="dob">Date of Birth:</label>
            <input type="date" id="dob" name="dob">
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Preferences</legend>
        
        <div>
            <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>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
        </div>
        
        <div>
            <label>Interests:</label>
            <input type="checkbox" id="sports" name="interests[]" value="sports">
            <label for="sports">Sports</label>
            <input type="checkbox" id="music" name="interests[]" value="music">
            <label for="music">Music</label>
            <input type="checkbox" id="reading" name="interests[]" value="reading">
            <label for="reading">Reading</label>
        </div>
        
        <div>
            <label for="country">Country:</label>
            <select id="country" 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>
        </div>
    </fieldset>
    
    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" cols="50"></textarea>
    </div>
    
    <div>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </div>
</form>

Form Validation

HTML introduced several attributes for form validation:

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

<!-- Email validation -->
<input type="email" name="email">

<!-- Number range -->
<input type="number" name="age" min="18" max="100">

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

<!-- Text length -->
<input type="text" name="username" minlength="3" maxlength="15">

These validation attributes provide a basic level of form validation directly in the browser, without the need for JavaScript. However, client-side validation should always be complemented with server-side validation for security reasons.

Continue to Part 2

Continue to Part 2 to learn about HTML Tables, Multimedia, and Metadata.