HTML Learning Guide - Basic to Advanced

Introduction to HTML

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

Note: HTML is not a programming language; it's a markup language that defines the structure of your content.

How HTML Works

HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

Basic Document Structure

Every HTML document follows a basic structure that includes the following elements:

<!DOCTYPE html> - Defines the document type and HTML version
<html> - The root element of an HTML page
<head> - Contains meta information about the document
<title> - Specifies a title for the document
<body> - Contains the visible page content

<!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>

Tip: Always include the lang attribute in the <html> tag for accessibility and SEO benefits.

Text Elements & Formatting

HTML provides various elements for formatting text and defining its structure and meaning.

Heading Elements

HTML has six levels of headings, from <h1> (most important) to <h6> (least important).

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

Text Formatting

HTML provides various tags for text formatting:

Tag	Description	Example
<strong>	Important text (bold)	This is important
<em>	Emphasized text (italic)	This is emphasized
<mark>	Marked/highlighted text	This is marked
<small>	Smaller text	This is small
<del>	Deleted text (strikethrough)	~~This is deleted~~
<ins>	Inserted text (underline)	This is inserted
<sub>	Subscript text	H₂O
<sup>	Superscript text	X²

Practice Exercise

Create a paragraph that includes at least 5 different text formatting elements.

<p>
    This is <strong>important</strong> text, 
    this is <em>emphasized</em>, 
    this is <mark>highlighted</mark>, 
    this is <small>small</small>, 
    and this is <del>deleted</del>.
</p>

HTML Entities

HTML entities are used to display reserved characters or characters that don't appear on a standard keyboard. They begin with an ampersand (&) and end with a semicolon (;).

Common HTML Entities

Here are some frequently used HTML entities:

Character	Entity Name	Entity Number	Description
<	<	<	Less than sign
>	>	>	Greater than sign
&	&	&	Ampersand
"	"	"	Double quotation mark
'	'	'	Single quotation mark
©	©	©	Copyright symbol
®	®	®	Registered trademark
			Non-breaking space
€	€	€	Euro currency symbol

Using HTML Entities

Entities are essential when you need to display characters that have special meaning in HTML, like angle brackets.

<p>To display an HTML tag, use entities: &lt;div&gt;</p>
<p>Copyright &copy; 2023 My Company</p>
<p>Price: 25&euro;</p>
<p>This&nbsp;text&nbsp;has&nbsp;non-breaking&nbsp;spaces</p>

Practice Exercise

Create a paragraph that includes at least 5 different HTML entities.

<p>
    Display the less than sign: &lt; <br>
    Display the greater than sign: &gt; <br>
    Display an ampersand: &amp; <br>
    Display the copyright symbol: &copy; <br>
    Display the euro symbol: &euro;
</p>

Tip: You can find a complete list of HTML entities on the W3Schools HTML Entities Reference.

Links & Images

Links and images are essential components of web pages.

Anchor Elements (Links)

The <a> tag defines a hyperlink, which is used to link from one page to another.

<a href="https://www.example.com">Visit Example.com</a>
<a href="about.html">About Us</a>
<a href="#section1">Jump to Section 1</a>
<a href="mailto:someone@example.com">Send Email</a>
<a href="tel:+1234567890">Call Us</a>

Image Elements

The <img> tag is used to embed an image in an HTML page. It is an empty tag containing only attributes.

<img src="image.jpg" alt="Description of image" width="500" height="300">
<img src="https://source.unsplash.com/random/400x200" alt="Random image">

Important: Always include the alt attribute for accessibility. This text is read by screen readers and displayed if the image fails to load.

Figure and Figcaption

The <figure> tag specifies self-contained content, and the <figcaption> tag defines a caption for a <figure> element.

<figure>
    <img src="landscape.jpg" alt="Beautiful landscape">
    <figcaption>Fig.1 - Beautiful mountain landscape at sunset.</figcaption>
</figure>

Lists

HTML provides several types of lists for organizing content.

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
</ol>

<ol start="50">
    <li>Item 50</li>
    <li>Item 51</li>
</ol>

Description Lists

A description list is a list of terms, with a description of each term.

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

Practice Exercise

Create a nested list with at least two levels (e.g., a menu with categories and items).

<ul>
    <li>Breakfast
        <ul>
            <li>Pancakes</li>
            <li>Waffles</li>
        </ul>
    </li>
    <li>Lunch
        <ul>
            <li>Sandwich</li>
            <li>Salad</li>
        </ul>
    </li>
</ul>

Tables

HTML tables allow web developers to arrange data into rows and columns.

<table>
    <caption>Monthly Savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$150</td>
    </tr>
</table>

Monthly Savings
Month	Savings
January	$100
February	$150

Advanced Table Structure

For more complex tables, you can use <thead>, <tbody>, and <tfoot> elements.

<table>
    <thead>
        <tr>
            <th colspan="2">Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Smith</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total People</td>
            <td>2</td>
        </tr>
    </tfoot>
</table>

Name	Age
John	Doe	25
Jane	Smith	30
Total People	2

Forms & Input Elements

HTML forms are used to collect user input. A form contains input elements like text fields, checkboxes, radio buttons, submit buttons, etc.

<form action="/submit-form" method="post">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" required><br>
    
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" required><br>
    
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br>
    
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password" required><br>
    
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
    
    <label for="country">Country:</label><br>
    <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="canada">Canada</option>
    </select><br>
    
    <fieldset>
        <legend>Gender:</legend>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label><br>
        
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label>
    </fieldset>
    
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
    <label for="subscribe">Subscribe to newsletter</label><br>
    
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

HTML5 Input Types

HTML5 introduced several new input types for better input control and validation:

Type	Description
color	Color picker
date	Date selector
datetime-local	Date and time selector (no timezone)
email	Email address field with validation
month	Month and year selector
number	Numeric input field
range	Slider control
search	Search field
tel	Telephone number field
time	Time selector
url	URL field with validation
week	Week and year selector

Semantic HTML

Semantic HTML introduces meaning to the web page rather than just presentation. It makes web content more accessible and helps with SEO.

Common Semantic Elements

Element	Description
<header>	Represents introductory content
<nav>	Defines navigation links
<main>	Specifies the main content of a document
<section>	Defines a section in a document
<article>	Defines independent, self-contained content
<aside>	Defines content aside from the page content
<footer>	Defines a footer for a document or section
<figure>	Specifies self-contained content
<figcaption>	Defines a caption for a <figure> element
<mark>	Defines marked/highlighted text
<time>	Defines a date/time

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h2>Article Title</h2>
            <p>Published on <time datetime="2023-05-01">May 1, 2023</time></p>
        </header>
        
        <section>
            <h3>Introduction</h3>
            <p>Article content...</p>
        </section>
        
        <figure>
            <img src="image.jpg" alt="Description">
            <figcaption>Image caption</figcaption>
        </figure>
    </article>
    
    <aside>
        <h3>Related Articles</h3>
        <ul>
            <li><a href="#">Related article 1</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2023 Company Name</p>
</footer>

Multimedia

HTML supports various multimedia elements including audio, video, and embedded content.

Audio Element

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

Video Element

<video width="320" height="240" controls poster="poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Embedding Content

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

<!-- Embed Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18..." 
        width="600" 
        height="450" 
        frameborder="0" 
        style="border:0;" 
        allowfullscreen>
</iframe>

Accessibility

Web accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with the web.

Key Accessibility Practices

Use semantic HTML elements
Provide alternative text for images
Ensure sufficient color contrast
Create accessible forms with proper labels
Make interactive elements keyboard accessible
Use ARIA attributes when necessary

ARIA Landmarks

ARIA (Accessible Rich Internet Applications) landmarks help screen reader users navigate pages.

<div role="banner">...</div>        <!-- Same as <header> -->
<div role="navigation">...</div>   <!-- Same as <nav> -->
<div role="main">...</div>          <!-- Same as <main> -->
<div role="complementary">...</div> <!-- Same as <aside> -->
<div role="contentinfo">...</div>    <!-- Same as <footer> -->

Tip: Prefer using semantic HTML elements over ARIA roles when possible, as they provide built-in accessibility features.

HTML Best Practices

Follow these best practices to write clean, maintainable, and efficient HTML code.

Code Organization

Use proper indentation and formatting
Comment your code when necessary
Use lowercase for element and attribute names
Quote all attribute values
Close all HTML elements properly

Performance

Minimize the use of divs - use semantic elements instead
Specify image dimensions to prevent layout shifts
Use lazy loading for images below the fold
Minify your HTML in production

SEO Optimization

Use descriptive title tags
Include meta descriptions
Use proper heading hierarchy (h1 > h2 > h3)
Add alt attributes to images
Use semantic HTML structure

Remember: Always validate your HTML using the W3C Validator to ensure it follows standards and is error-free.

Introduction to HTML

How HTML Works

Output:

Basic Document Structure

Text Elements & Formatting

Heading Elements

Output:

Main Heading

Subheading

Sub-subheading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Text Formatting

Practice Exercise

Output:

HTML Entities

Common HTML Entities

Using HTML Entities

Output:

Practice Exercise

Output:

Links & Images

Anchor Elements (Links)

Output:

Image Elements

Figure and Figcaption

Lists

Unordered Lists

Output:

Ordered Lists

Output:

Description Lists

Output:

Practice Exercise

Output:

Tables

Output:

Advanced Table Structure

Output:

Forms & Input Elements

Output:

HTML5 Input Types

Semantic HTML

Common Semantic Elements

Output:

Introduction

Multimedia

Audio Element

Video Element

Embedding Content

Accessibility

Key Accessibility Practices

ARIA Landmarks

HTML Best Practices

Code Organization

Performance

SEO Optimization