Welcome to HTML!

HTML elements are the building blocks of HTML pages. They consist of tags and content. An HTML element is defined by a start tag, some content, and an end tag. Tags are the names enclosed in angle brackets, like <p> for paragraph.

Common HTML Elements

Here are the most frequently used HTML elements that you'll encounter in almost every web page:

• Headings: <h1> to <h6> for titles and subtitles. <h1> is the most important (and largest), while <h6> is the least important.
• Paragraphs: <p> for text content. This is where you put the main body text of your page.
• Divisions: <div> for grouping elements. It's a generic container that has no semantic meaning.
• Spans: <span> for inline grouping. Unlike div, span doesn't create a new line.
• Line Breaks: <br> for new lines. This is a void element (no closing tag).
• Horizontal Rules: <hr> for thematic breaks. Creates a horizontal line across the page.

Some HTML elements are "void" or "self-closing" elements that don't have closing tags. Examples include <br>, <img>, <hr>, and <input>. In HTML5, you can write them as <br> or <br/>.

    <h1>Main Heading</h1>
    <h2>Subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph with a <br>line break.</p>
    <hr>
    <div>
        <span>This is inline</span>
        <span>text in a div.</span>
    </div>

HTML provides various elements for text formatting and styling. While CSS is now the preferred method for styling, these HTML formatting elements are still widely used for semantic purposes and quick formatting.

Here are the essential text formatting elements:

• Bold: <b> or <strong> - <b> is for stylistic bold, while <strong> indicates strong importance.
• Italic: <i> or <em> - <i> is for stylistic italic, while <em> indicates emphasis.
• Underline: <u> - Generally avoided in modern web design as users expect underlined text to be a link.
• Strikethrough: <s> or <del> - <s> indicates content no longer accurate, <del> indicates deleted text.
• Superscript: <sup> - Raises text above the baseline, used for exponents and footnotes.
• Subscript: <sub> - Lowers text below the baseline, used for chemical formulas.
• Highlight: <mark> - Highlights text for reference or notation.
• Small text: <small> - Represents side comments or fine print.

Remember: HTML is for structure and meaning, CSS is for presentation. While these tags do affect appearance, their primary purpose is to convey meaning. Use CSS when you only want to change how something looks.

    <p>This is <b>bold</b> text.</p>
    <p>This is <strong>important</strong> text.</p>
    <p>This is <i>italic</i> text.</p>
    <p>This is <em>emphasized</em> text.</p>
    <p>This is <u>underlined</u> text.</p>
    <p>This is <s>strikethrough</s> text.</p>
    <p>H<sub>2</sub>O is water.</p>
    <p>10<sup>2</sup> = 100</p>
    <p>This is <mark>highlighted</mark> text.</p>
    <p>This is <small>smaller</small> text.</p>

Lists are essential for organizing content in a structured way. HTML provides three types of lists, each serving different purposes for content organization.

HTML provides three types of lists:

• Unordered Lists: Bulleted lists using <ul> - Use when items have no particular order.
• Ordered Lists: Numbered lists using <ol> - Use when sequence matters (steps, rankings).
• Description Lists: Definition lists using <dl> - Use for terms and definitions.

List Attributes

Lists can be customized with various attributes:

• type - Type of numbering/bullets (1, A, a, I, i for ordered; disc, circle, square for unordered)
• start - Starting number (for ordered lists) - e.g., start="3" begins at 3
• reversed - Reverse numbering (counts down instead of up)

For unordered lists, you should use CSS (list-style-type property) instead of the type attribute for styling bullets, as the type attribute is deprecated in HTML5.

    <!-- Unordered List -->
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

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

    <!-- Description List -->
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>

Links (hyperlinks) and images are essential for navigation and content display on the web. They're what make the web "connected" - links connect pages, and images make content engaging.

Anchor Tags (<a>)

The anchor tag creates hyperlinks to other web pages, files, locations within the same page, email addresses, or phone numbers. Here are its most important attributes:

• href - Specifies the URL (Hypertext Reference). This is the destination of the link.
• target - Where to open the link. _blank opens in a new tab, _self opens in same tab (default).
• download - Download instead of navigating. Can include a suggested filename.
• rel - Relationship between documents. Important for security and SEO.

Image Tags (<img>)

Images make web pages visually appealing. The <img> tag embeds images into HTML documents. Important attributes include:

• src - Image source URL. Can be relative or absolute.
• alt - Alternative text (required for accessibility). Describes the image.
• width & height - Image dimensions in pixels. Helps prevent layout shifts.
• loading - Lazy loading attribute. lazy delays loading until near viewport.
• srcset & sizes - For responsive images (different sizes for different screens).

Always provide descriptive alt text for accessibility! Screen readers read alt text to visually impaired users. If an image is purely decorative, use alt="" (empty string).

    <!-- Basic Link -->
    <a href="https://www.example.com">Visit Example</a>

    <!-- Link with target -->
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
        Open in New Tab
    </a>

    <!-- Email Link -->
    <a href="mailto:someone@example.com">Send Email</a>

    <!-- Phone Link -->
    <a href="tel:+1234567890">Call us</a>

    <!-- Basic Image -->
    <img src="image.jpg" alt="Description of image">

    <!-- Image with dimensions -->
    <img src="photo.jpg" alt="Photo" width="300" height="200" loading="lazy">

    <!-- Image as Link -->
    <a href="large-image.jpg">
        <img src="thumbnail.jpg" alt="Click to enlarge">
    </a>

Tables are used to display data in rows and columns. While they were once misused for page layout, in modern web development tables should only be used for tabular data - information that logically belongs in a grid format.

Table Structure

A well-structured table uses several elements to organize data semantically:

• <table> - Defines the table container. All table elements go inside this.
• <tr> - Table row. Creates a horizontal row of cells.
• <th> - Table header cell. Used for column or row headers. Browsers typically display these in bold.
• <td> - Table data cell. Contains the actual data.
• <thead> - Groups header content. Contains <tr> elements with <th> cells.
• <tbody> - Groups body content. Contains the main data rows.
• <tfoot> - Groups footer content. For summaries or totals.
• <caption> - Provides a title or description for the table.

Table Attributes

While many table attributes are deprecated in HTML5 (use CSS instead), these are still relevant:

• colspan - Cell spans multiple columns. Example: colspan="2"
• rowspan - Cell spans multiple rows. Example: rowspan="3"
• scope - Defines whether header applies to row, column, or group
• headers - Associates data cells with header cells (for complex tables)

Never use tables for page layout! This was common in the 1990s but is now considered bad practice. Tables for layout create accessibility issues, are hard to maintain, and don't work well on mobile devices.

    <table>
        <caption>Employee Information</caption>
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
                <th scope="col">City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>25</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>30</td>
                <td>London</td>
            </tr>
        </tbody>
    </table>

Forms are used to collect user input and submit it to a server for processing. They're essential for interactive websites - login forms, contact forms, search boxes, registration forms, and checkout processes all use HTML forms.

Form Elements

Forms consist of various input elements, each serving a specific purpose:

• <form> - Container for form elements. Has action (where to send data) and method (GET or POST) attributes.
• <input> - Various input types. The most versatile form element.
• <textarea> - Multi-line text input. For comments, descriptions, long text.
• <select> - Dropdown list. For selecting from multiple options.
• <option> - Option in dropdown. Goes inside <select>.
• <button> - Clickable button. Can be type="submit", "reset", or "button".
• <label> - Label for form elements. Improves accessibility and usability.
• <fieldset> - Groups related form elements. Often with <legend>.
• <legend> - Caption for <fieldset>.

Input Types

HTML5 introduced many new input types that provide better user experience and validation:

• Basic: text, password, email, tel
• Numbers & Dates: number, date, time, datetime-local, month, week
• Choices: checkbox, radio, range (slider)
• Files & Buttons: file, submit, reset, button, image
• Specialized: color, search, url, hidden

Always validate form data on the server-side too! Client-side validation (HTML/JavaScript) improves user experience but can be bypassed. Server-side validation is essential for security.

<form action="/submit" method="POST">
    <fieldset>
        <legend>Personal Information</legend>
        
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required 
               placeholder="Enter your full name">
        
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" required 
               placeholder="you@example.com">
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" 
               minlength="8" required>
        
        <label>Gender:</label>
        <div>
            <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>
    </fieldset>
    
    <fieldset>
        <legend>Additional Information</legend>
        
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="ca">Canada</option>
        </select>
        
        <label for="bio">Biography:</label>
        <textarea id="bio" name="bio" rows="4" 
                  placeholder="Tell us about yourself..."></textarea>
        
        <label>
            <input type="checkbox" name="newsletter" checked>
            Subscribe to newsletter
        </label>
    </fieldset>
    
    <button type="submit">Register</button>
    <button type="reset">Clear Form</button>
</form>

Semantic HTML elements clearly describe their meaning to both browser and developer. Unlike generic elements like <div> and <span>, semantic elements tell you what type of content they contain.

Common Semantic Elements

HTML5 introduced several new semantic elements that replace the generic <div> elements we used to use for layout:

• <header> - Introductory content or navigational aids. Typically contains logo, heading, navigation.
• <nav> - Navigation links. For major navigation blocks (not every link group).
• <main> - Main content of the document. Should be unique to the document.
• <article> - Independent, self-contained content. Should make sense on its own.
• <section> - Thematic grouping of content. Usually with a heading.
• <aside> - Sidebar content. Related to main content but separate.
• <footer> - Footer content. Typically contains authorship, copyright, contact.
• <figure> & <figcaption> - Self-contained media with caption.
• <time> - Date/time. Can include datetime attribute for machine-readable format.
• <mark> - Highlighted text for reference purposes.

Document Outline Algorithm

Semantic elements create an implicit document outline that helps assistive technologies understand page structure. Headings (<h1>-<h6>) within semantic elements create this outline. Each <article>, <section>, <aside>, and <nav> creates a new section in the outline.

Semantic HTML improves accessibility, SEO, and code readability. Search engines give semantic pages higher rankings, screen readers provide better navigation, and developers can understand code faster.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Post - Semantic Example</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Understanding Semantic HTML</h2>
                <p>Published on <time datetime="2024-03-15">March 15, 2024</time></p>
            </header>
            
            <section>
                <h3>What is Semantic HTML?</h3>
                <p>Semantic HTML means using HTML elements according to their meaning...</p>
                <figure>
                    <img src="semantic-html.jpg" alt="Diagram showing semantic HTML structure">
                    <figcaption>Semantic HTML document structure</figcaption>
                </figure>
            </section>
            
            <section>
                <h3>Benefits of Semantic HTML</h3>
                <p>The main benefits are improved accessibility and SEO...</p>
            </section>
        </article>
        
        <aside>
            <h3>Related Articles</h3>
            <ul>
                <li><a href="#">HTML5 New Features</a></li>
                <li><a href="#">Web Accessibility Guide</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2024 My Blog. All rights reserved.</p>
        <address>Contact: <a href="mailto:author@example.com">author@example.com</a></address>
    </footer>
</body>
</html>

HTML5 introduced native support for audio and video without plugins like Flash. This was a major advancement that improved performance, security, and accessibility of multimedia content on the web.

Audio Element

The <audio> element embeds sound content. It can contain multiple <source> elements for different formats (browsers use the first supported format). Key attributes:

• controls - Shows audio controls (play/pause, volume, etc.)
• autoplay - Starts playing automatically (use sparingly - can be annoying)
• loop - Repeats audio when it ends
• muted - Starts muted (useful for autoplay videos)
• preload - How to preload the audio: none, metadata, or auto
• src - Source file (can also use <source> elements inside)

Video Element

The <video> element embeds video content. It shares many attributes with <audio> but adds visual-specific attributes:

• width & height - Video dimensions in pixels
• poster - Thumbnail image shown before video plays
• autoplay, loop, muted - Same as audio element
• controls - Shows video controls
• playsinline - Prevents fullscreen on iOS (for inline playback)
• preload - Same as audio: none, metadata, or auto

Responsive Multimedia

For responsive design, don't use fixed width and height attributes. Instead, use CSS:
video { max-width: 100%; height: auto; }
This makes videos scale with their container while maintaining aspect ratio.

Always include captions/subtitles for videos! Use the <track> element with kind="captions" for accessibility. This helps hearing-impaired users and people watching without sound.

<!-- Audio Player with Multiple Sources -->
<audio controls>
    <source src="audio/sound.mp3" type="audio/mpeg">
    <source src="audio/sound.ogg" type="audio/ogg">
    <source src="audio/sound.webm" type="audio/webm">
    Your browser does not support the audio element.
    <a href="audio/sound.mp3">Download the audio</a>
</audio>

<!-- Video Player with Captions -->
<video controls width="640" poster="video-poster.jpg">
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.webm" type="video/webm">
    
    <track src="captions/en.vtt" kind="captions" 
           srclang="en" label="English">
    <track src="captions/es.vtt" kind="captions" 
           srclang="es" label="Spanish" default>
    
    Your browser does not support the video element.
    <a href="video/movie.mp4">Download the video</a>
</video>

<!-- Responsive Video with CSS -->
<div class="video-container">
    <video controls poster="poster.jpg">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>

<!-- Embed YouTube Video -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

HTML5 introduced many advanced features and APIs that enable rich web applications. These features reduce reliance on plugins and JavaScript for common tasks, improving performance and security.

HTML5 APIs

HTML5 includes JavaScript APIs that work with HTML elements to create interactive experiences:

• Canvas API: For drawing graphics, animations, games. Creates a bitmap drawing surface.
• Geolocation API: For location data (with user permission). Used for maps, local services.
• Local Storage: For storing data locally in browser. localStorage and sessionStorage.
• Drag & Drop API: For drag-and-drop functionality. Native browser support.
• Web Workers: For background processing. Runs scripts in background threads.
• Web Sockets: For real-time communication. Two-way persistent connection.
• History API: For manipulating browser history. Enables single-page applications.
• File API: For reading files locally. Enables file uploads with previews.

New Input Types

HTML5 introduced specialized input types that provide better user experience and built-in validation:

• color - Color picker. Returns hex color value.
• date, time, datetime-local - Date/time pickers.
• range - Slider control. min, max, step attributes.
• search - Search field. May have clear button.
• tel - Telephone number. Mobile devices may show phone pad.
• url - URL field. Validates URL format.
• number - Number input. Spinner controls, validation.
• email - Email input. Validates email format (basic).
• month, week - Month/week selectors.

New Elements

HTML5 also introduced new elements beyond semantic ones:

• <progress> - Progress bar. Shows completion percentage.
• <meter> - Meter/gauge. Shows scalar measurement.
• <details> & <summary> - Expandable widget.
• <datalist> - Predefined options for input. Creates autocomplete.
• <output> - Calculation results. For form calculations.
• <template> - Client-side template. Content not rendered initially.

HTML5 is a living standard! New features are regularly added. Check the WHATWG HTML Living Standard for the latest specifications and browser compatibility.

<!-- Canvas Drawing -->
<canvas id="myCanvas" width="200" height="100">
    Your browser doesn't support canvas.
</canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 80);
</script>

<!-- New Input Types -->
<input type="color" value="#ff0000">
<input type="date" min="2024-01-01" max="2024-12-31">
<input type="range" min="0" max="100" value="50" step="10">
<input type="search" placeholder="Search...">
<input type="email" multiple placeholder="Enter email(s)">

<!-- Progress and Meter -->
<label>Upload Progress:</label>
<progress value="75" max="100">75%</progress>

<label>Storage Usage:</label>
<meter value="0.6" min="0" max="1" low="0.25" high="0.75" optimum="0.5">
    60% used
</meter>

<!-- Details & Summary (Accordion) -->
<details>
    <summary>Click to expand for more information</summary>
    <p>This content is hidden by default but shown when expanded.</p>
</details>

<!-- Datalist for Autocomplete -->
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

<!-- Output Element -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="number" id="b" value="25"> =
    <output name="result" for="a b">75</output>
</form>