Skip to main content

Course Progress

Loading...

Essential HTML Tags

Duration: 45 minutes
Module 1: HTML Fundamentals

Learning Objectives

  • Understand HTML structure and semantics
  • Create well-formed HTML documents
  • Use HTML tags effectively
  • Build accessible web content

The Building Blocks of Web Content

HTML (HyperText Markup Language) provides a rich set of elements, or tags, that enable you to structure and present content on the web. Think of these tags as the vocabulary of the web - the words you use to tell browsers what your content means and how it should be structured.

The Language Analogy

HTML tags are like parts of speech in a language:

  • Headings are like titles and subtitles in a book
  • Paragraphs are like, well, paragraphs in written text
  • Lists are like bullet points or numbered steps
  • Links are like references or footnotes that lead to other material
  • Tables are like the tables in a textbook or report
  • Images are like the illustrations that accompany text
  • Semantic elements are like specialized terminology that conveys specific meaning

Text Structure Elements

Headings: Structuring Your Content Hierarchy

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

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Visual Representation:

Main Page Title Section Heading Subsection Heading Sub-subsection Heading Minor Heading Smallest Heading

Best Practices for Headings:

  • Use only one <h1> per page (typically for the main title)
  • Maintain a logical hierarchy (don't skip levels, like going from <h2> to <h4>)
  • Use headings to structure content, not for styling (don't choose a heading level because of its appearance)
  • Keep headings concise and descriptive

Real-World Application:

Think of a news website. The newspaper name might be in the <h1>, article titles in <h2>, section headings like "Background" or "Analysis" in <h3>, and so on. This hierarchy helps readers (and search engines) understand the structure and importance of different content pieces.

Paragraphs: The Basic Text Blocks

The <p> element defines a paragraph of text - the most basic building block for textual content.

<p>This is a paragraph of text. Paragraphs are block-level elements, which means they create a new line before and after themselves.</p>
<p>This is another paragraph. Notice how it starts on a new line.</p>

A Note About Spacing:

In HTML, whitespace is generally collapsed - multiple spaces, tabs, and line breaks are treated as a single space when rendered. To force a line break within a paragraph, use the <br> element:

<p>This text will be on one line.<br>And this text will be on a new line.</p>

Text Formatting Within Paragraphs:

You can format text within paragraphs using inline elements:

<p>You can make text <strong>bold</strong> or <em>italic</em>.</p>
<p>You can add <mark>highlighting</mark>, <del>strikethrough</del>, or <ins>underline</ins>.</p>
<p>You can add <sub>subscript</sub> or <sup>superscript</sup> text.</p>
<p>You can display <code>computer code</code> or <kbd>keyboard input</kbd>.</p>
Visual Result:

You can make text bold or italic.

You can add highlighting, strikethrough, or underline.

You can add subscript or superscript text.

You can display computer code or keyboard input.

Links: Connecting the Web

The <a> (anchor) element creates a hyperlink to another webpage, file, email address, or location within the same page.

<!-- Basic link to another website -->
<a href="https://example.com">Visit Example.com</a>

<!-- Link to another page in the same site -->
<a href="about.html">About Us</a>

<!-- Link that opens in a new tab -->
<a href="https://example.com" target="_blank">Open in New Tab</a>

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

<!-- Telephone link (useful for mobile) -->
<a href="tel:+1234567890">Call Us</a>

<!-- Link to a specific location in the same page -->
<a href="#section2">Jump to Section 2</a>

<!-- The corresponding target location -->
<h2 id="section2">Section 2</h2>

Important Link Attributes:

  • href - The URL or path the link points to (required)
  • target - Where to open the linked document:
    • _self - Same tab/window (default)
    • _blank - New tab/window
    • _parent - Parent frame
    • _top - Full window
  • rel - Relationship between current and linked document:
    • nofollow - Search engines shouldn't follow this link
    • noopener - Prevents security vulnerabilities (use with target="_blank")
    • noreferrer - Prevents passing referrer information
  • download - Indicates the link is for downloading a file
  • title - Additional information (shows as a tooltip)

Best Practices for Links:

  • Use descriptive link text (avoid "click here" or "read more")
  • Add rel="noopener noreferrer" when using target="_blank" for security
  • Clearly indicate when links open in new tabs or download files
  • Ensure linked text is distinguishable from regular text (usually underlined by default)
  • Use absolute URLs for external sites and relative URLs for internal pages

Real-World Application:

Consider an e-commerce site. Product listings link to product details, navigation links to different categories, "Add to Cart" buttons link to cart functionality, and social media icons link to the company's profiles. A well-designed website uses appropriate link types to create an intuitive and navigable experience.

Lists: Organizing Information

HTML provides three types of lists: unordered (bullet points), ordered (numbered), and description lists.

Unordered Lists

Use unordered lists (<ul>) when the order of items doesn't matter, like a shopping list or feature list.

<h3>Shopping List</h3>
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Oranges</li>
        </ul>
    </li>
</ul>

Visual Result:

Shopping List

  • Milk
  • Bread
  • Eggs
  • Fruits
    • Apples
    • Bananas
    • Oranges

Ordered Lists

Use ordered lists (<ol>) when the sequence of items matters, like steps in a recipe or instructions.

<h3>How to Make Tea</h3>
<ol>
    <li>Boil water</li>
    <li>Add tea bag to cup</li>
    <li>Pour hot water into cup</li>
    <li>Steep for 3-5 minutes</li>
    <li>Remove tea bag</li>
    <li>Add sugar or milk (optional)</li>
</ol>

Customizing Ordered Lists:

<!-- Start numbering from 5 -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

<!-- Use different numbering types -->
<ol type="A"> <!-- A, B, C, ... -->
    <li>First item</li>
    <li>Second item</li>
</ol>

<ol type="i"> <!-- i, ii, iii, ... -->
    <li>First item</li>
    <li>Second item</li>
</ol>

<ol type="1"> <!-- 1, 2, 3, ... (default) -->
    <li>First item</li>
    <li>Second item</li>
</ol>

Description Lists

Use description lists (<dl>) for term-definition pairs, like a glossary or metadata.

<h3>Web Development Glossary</h3>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, the standard language for creating web pages.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used for styling HTML elements.</dd>
    
    <dt>JavaScript</dt>
    <dd>A programming language that enables interactive web pages.</dd>
</dl>

Visual Result:

Web Development Glossary

HTML
HyperText Markup Language, the standard language for creating web pages.
CSS
Cascading Style Sheets, used for styling HTML elements.
JavaScript
A programming language that enables interactive web pages.

Best Practices for Lists:

  • Use the appropriate list type for your content
  • Maintain consistent formatting within lists
  • Lists can be nested, but avoid excessive nesting for readability
  • List items can contain multiple paragraphs, images, and other HTML elements
  • Use CSS to style lists rather than changing the HTML structure

Tables: Displaying Tabular Data

Tables are used to organize data into rows and columns. While they should not be used for layout purposes (use CSS for that), they're perfect for displaying structured data like spreadsheets, schedules, or comparison charts.

Basic Table Structure

<table>
    <caption>Monthly Expenses</caption>
    <thead>
        <tr>
            <th>Category</th>
            <th>January</th>
            <th>February</th>
            <th>March</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rent</td>
            <td>$1000</td>
            <td>$1000</td>
            <td>$1000</td>
        </tr>
        <tr>
            <td>Utilities</td>
            <td>$150</td>
            <td>$140</td>
            <td>$130</td>
        </tr>
        <tr>
            <td>Groceries</td>
            <td>$350</td>
            <td>$375</td>
            <td>$340</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>$1500</td>
            <td>$1515</td>
            <td>$1470</td>
        </tr>
    </tfoot>
</table>

Essential Table Components:

  • <table> - The container for the entire table
  • <caption> - A title or description of the table (optional but recommended)
  • <thead> - Container for header rows
  • <tbody> - Container for the main data rows
  • <tfoot> - Container for footer rows (like totals)
  • <tr> - Table row
  • <th> - Table header cell (bold and centered by default)
  • <td> - Table data cell

Advanced Table Features

Spanning Multiple Rows or Columns

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Contact</th> <!-- Spans 2 columns -->
    </tr>
    <tr>
        <td>John Doe</td>
        <td>Email</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td rowspan="2">Jane Smith</td> <!-- Spans 2 rows -->
        <td>jane@example.com</td>
        <td>555-1234</td>
    </tr>
    <tr>
        <td>smith@company.com</td>
        <td>555-5678</td>
    </tr>
</table>

Table Row Groups

Using <thead>, <tbody>, and <tfoot> helps browsers render large tables more efficiently and allows you to style different sections differently.

Table Accessibility

For accessibility, use appropriate attributes:

<table>
    <caption>Employee Schedule</caption>
    <tr>
        <th scope="col">Name</th> <!-- Column header -->
        <th scope="col">Monday</th>
        <th scope="col">Tuesday</th>
    </tr>
    <tr>
        <th scope="row">John</th> <!-- Row header -->
        <td>9-5</td>
        <td>12-8</td>
    </tr>
</table>

Best Practices for Tables:

  • Use tables for tabular data only, not for layout
  • Include a <caption> to describe the table's purpose
  • Use <th> for header cells and <td> for data cells
  • Use scope attributes to associate header cells with data cells
  • Keep tables as simple as possible for better readability
  • Use CSS for styling rather than deprecated HTML attributes like bgcolor
  • Consider using responsive design techniques for tables on mobile devices

Real-World Application:

Tables are ideal for financial reports, product comparison charts, schedules, sports league standings, and any data that has a clear row-and-column structure. For instance, an e-commerce site might use tables to display product specifications or shipping rates by region.

Images: Adding Visual Content

Images enhance the visual appeal of web pages and help convey information more effectively. The <img> element is used to embed images in HTML documents.

Basic Image Syntax

<img src="image.jpg" alt="Description of the image">

Essential Image Attributes:

  • src - The source URL of the image (required)
  • alt - Alternative text description (required for accessibility)
  • width and height - Dimensions in pixels (recommended)
  • title - Additional information (shows as a tooltip)
  • loading - Controls loading behavior (eager or lazy)

The Importance of Alt Text

The alt attribute serves multiple purposes:

  • Provides information for screen readers (accessibility)
  • Displays when images fail to load
  • Helps search engines understand the image content
  • Contributes to better SEO

Examples of Good Alt Text:

<!-- Informative image -->
<img src="chart-quarterly-sales.jpg" alt="Bar chart showing quarterly sales for 2025, with Q2 having the highest sales at $1.2M">

<!-- Decorative image (that doesn't add information) -->
<img src="decorative-line.png" alt="">

<!-- Image used as a link -->
<a href="about.html">
    <img src="about-icon.png" alt="About Us page">
</a>

Common Image Formats

Format Best For Features
JPEG (.jpg, .jpeg) Photographs, complex images with many colors Lossy compression, smaller file sizes, no transparency
PNG (.png) Images requiring transparency, graphics with text Lossless compression, transparency support, larger file sizes
GIF (.gif) Simple animations, images with few colors Animation support, limited to 256 colors
SVG (.svg) Logos, icons, illustrations that need to scale Vector format (scalable), small file size, can be styled with CSS
WebP (.webp) Modern replacement for both JPEG and PNG Better compression, supports both lossy and lossless compression, transparency

Responsive Images

Making images responsive ensures they look good on all devices.

<!-- Basic responsive image (CSS approach is better) -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">

<!-- Using srcset for different resolutions -->
<img src="small.jpg" 
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     sizes="(max-width: 600px) 500px, 
            (max-width: 1200px) 1000px,
            1500px"
     alt="Description">

<!-- Using picture element for art direction -->
<picture>
    <source media="(max-width: 600px)" srcset="small-portrait.jpg">
    <source media="(min-width: 601px)" srcset="large-landscape.jpg">
    <img src="fallback.jpg" alt="Description">
</picture>

Using Figure and Figcaption

The <figure> and <figcaption> elements provide a semantic way to associate captions with images:

<figure>
    <img src="chart.jpg" alt="Bar chart showing quarterly sales data">
    <figcaption>Figure 1: Quarterly sales performance for 2025</figcaption>
</figure>

Best Practices for Images:

  • Always include descriptive alt text (empty for decorative images)
  • Specify image dimensions to help the browser allocate space during loading
  • Optimize images for the web (compress without losing quality)
  • Choose the appropriate file format for each image type
  • Consider lazy loading for images below the fold
  • Use responsive image techniques for different screen sizes
  • Provide context with <figure> and <figcaption> when appropriate

Semantic HTML Elements: Adding Meaning to Structure

Semantic HTML elements clearly describe their meaning to both browsers and developers. They provide information about the content they contain, which improves accessibility, SEO, and code readability.

Why Use Semantic Elements?

  • They make your code more readable and easier to maintain
  • They help screen readers and other assistive technologies understand your content
  • They improve your SEO (search engines better understand your content)
  • They provide consistent structure across websites

Non-Semantic vs. Semantic HTML

Non-Semantic Approach:
<div class="header">
    <h1>Website Title</h1>
    <div class="nav">
        <!-- Navigation links -->
    </div>
</div>

<div class="main-content">
    <div class="article">
        <h2>Article Title</h2>
        <div class="section">
            <h3>Section Heading</h3>
            <p>Some content...</p>
        </div>
    </div>
    <div class="sidebar">
        <!-- Sidebar content -->
    </div>
</div>

<div class="footer">
    <!-- Footer content -->
</div>
Semantic Approach:
<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Navigation links -->
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <section>
            <h3>Section Heading</h3>
            <p>Some content...</p>
        </section>
    </article>
    <aside>
        <!-- Sidebar content -->
    </aside>
</main>

<footer>
    <!-- Footer content -->
</footer>

Common Semantic Elements

                        graph TB
                            HTML[HTML Document] --> HEADER[<header>]
                            HTML --> NAV[<nav>]
                            HTML --> MAIN[<main>]
                            HTML --> FOOTER[<footer>]
                            
                            MAIN --> SECTION[<section>]
                            MAIN --> ARTICLE[<article>]
                            MAIN --> ASIDE[<aside>]
                            
                            SECTION --> H2[<h2>]
                            SECTION --> P1[<p>]
                            
                            ARTICLE --> H2_2[<h2>]
                            ARTICLE --> P2[<p>]
                            ARTICLE --> FIGURE[<figure>]
                            
                            FIGURE --> IMG[<img>]
                            FIGURE --> FIGCAPTION[<figcaption>]
                            
                            style HTML fill:#f8f9fa,stroke:#343a40
                            style HEADER fill:#e9ecef,stroke:#343a40
                            style NAV fill:#e9ecef,stroke:#343a40
                            style MAIN fill:#e9ecef,stroke:#343a40
                            style FOOTER fill:#e9ecef,stroke:#343a40
                            style SECTION fill:#dee2e6,stroke:#343a40
                            style ARTICLE fill:#dee2e6,stroke:#343a40
                            style ASIDE fill:#dee2e6,stroke:#343a40

Page Structure Elements:

  • <header> - Introductory content or navigational aids (page header or section header)
  • <nav> - Section with navigation links
  • <main> - Main content area of the document (should be unique)
  • <section> - Standalone section of content
  • <article> - Independent, self-contained content (could stand alone)
  • <aside> - Content tangentially related to the content around it (like a sidebar)
  • <footer> - Footer for a document or section

Text Semantic Elements:

  • <figure> and <figcaption> - Self-contained content with optional caption
  • <time> - Time or date
  • <mark> - Highlighted text
  • <cite> - Title of a work (book, film, etc.)
  • <abbr> - Abbreviation or acronym
  • <address> - Contact information

Form Semantic Elements:

  • <fieldset> and <legend> - Group of related form controls with caption
  • <label> - Caption for a form control
  • <output> - Container for results of a calculation or user action

Practical Examples of Semantic HTML

Blog Post Structure

<article>
    <header>
        <h1>Understanding Semantic HTML</h1>
        <p>Published on <time datetime="2025-04-15">April 15, 2025</time> by <address>Jane Smith</address></p>
    </header>
    
    <section>
        <h2>Introduction</h2>
        <p>Semantic HTML elements provide meaning to the structure of web content...</p>
    </section>
    
    <section>
        <h2>Benefits of Semantic HTML</h2>
        <p>There are several advantages to using semantic elements:</p>
        <ul>
            <li>Improved accessibility</li>
            <li>Better SEO</li>
            <li>Easier maintenance</li>
        </ul>
    </section>
    
    <figure>
        <img src="semantic-html-diagram.jpg" alt="Diagram showing semantic HTML structure">
        <figcaption>Figure 1: Visual representation of semantic HTML elements</figcaption>
    </figure>
    
    <footer>
        <p>Tags: <a href="#">HTML</a>, <a href="#">Web Development</a>, <a href="#">Accessibility</a></p>
    </footer>
</article>

Product Page Structure

<main>
    <section class="product-overview">
        <h1>Ergonomic Office Chair</h1>
        <figure>
            <img src="chair.jpg" alt="Black ergonomic office chair with adjustable height">
            <figcaption>Our best-selling ergonomic chair</figcaption>
        </figure>
        <p>Price: <mark>$199.99</mark> <s>$249.99</s></p>
    </section>
    
    <section class="product-details">
        <h2>Product Details</h2>
        <p>This ergonomic office chair provides superior comfort for long workdays...</p>
        
        <h3>Features</h3>
        <ul>
            <li>Adjustable height</li>
            <li>Lumbar support</li>
            <li>Breathable mesh back</li>
            <li>360° swivel</li>
        </ul>
    </section>
    
    <aside class="related-products">
        <h2>You Might Also Like</h2>
        <!-- Related products -->
    </aside>
</main>

Best Practices for Semantic HTML:

  • Choose elements based on their meaning, not their default styling
  • Don't overuse <div> and <span> when semantic alternatives exist
  • Use heading elements (<h1> through <h6>) in a logical hierarchical order
  • Include only one <main> element per page
  • Make sure interactive elements are keyboard accessible
  • Use ARIA roles and attributes when HTML semantics aren't sufficient
  • Test your page with screen readers and other assistive technologies

Let's Practice Together

Exercise: Create a Semantic Web Page

Open VS Code and create a new file named semantic_page.html. Let's build a simple but semantically rich webpage:

  1. Start with the basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>)
  2. Add a page header with a title and navigation
  3. Create a main content area with:
    • An article containing a heading, paragraphs, and a figure with an image
    • A section with a list of items
    • An aside with related information
  4. Add a footer with copyright information and links
  5. Include appropriate semantic elements throughout

We'll walk through this together in class, and you can customize it to create a personal profile or hobby page.

HTML Accessibility Considerations

Creating accessible web content is not just good practice—it's essential for ensuring your website is usable by everyone, including people with disabilities.

Basic Accessibility Principles

  • Semantic HTML - Use elements that describe their purpose
  • Alternative text - Provide text alternatives for non-text content
  • Keyboard accessibility - Ensure all functionality is available via keyboard
  • Focus management - Make it clear which element has keyboard focus
  • Color contrast - Ensure sufficient contrast between text and background
  • Form labels - Associate labels with form controls

Accessibility Code Examples

Proper Image Alt Text:

<!-- Informative image -->
<img src="chart.jpg" alt="Bar chart showing sales increased by 25% in Q2 2025">

<!-- Decorative image -->
<img src="decorative-divider.png" alt="">

Properly Labeled Forms:

<!-- Using the for attribute -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Wrapping the input with the label -->
<label>
    Email:
    <input type="email" name="email">
</label>

ARIA (Accessible Rich Internet Applications):

<!-- ARIA roles -->
<div role="alert">Your form has been submitted successfully!</div>

<!-- ARIA states and properties -->
<button aria-expanded="false" aria-controls="dropdown-menu">Menu</button>
<ul id="dropdown-menu" aria-hidden="true">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
</ul>

Real-World Examples

Portfolio Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Smith - Web Developer</title>
    <meta name="description" content="Portfolio website for Jane Smith, a web developer specializing in responsive design and WordPress development.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Jane Smith</h1>
        <p>Web Developer</p>
        
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>About Me</h2>
            <img src="profile.jpg" alt="Jane Smith smiling in a professional setting" width="300" height="300">
            <p>Hello! I'm a web developer with 5 years of experience specializing in responsive design and WordPress development.</p>
            <p>I'm passionate about creating user-friendly websites that look great on any device.</p>
        </section>
        
        <section id="projects">
            <h2>My Projects</h2>
            
            <article class="project">
                <h3>E-commerce Website</h3>
                <figure>
                    <img src="project1.jpg" alt="Screenshot of e-commerce website homepage" width="500" height="300">
                    <figcaption>A responsive e-commerce site built with WordPress and WooCommerce</figcaption>
                </figure>
                <p>This project involved creating a custom WordPress theme and integrating WooCommerce.</p>
                <p><a href="#">View Project</a></p>
            </article>
            
            <article class="project">
                <h3>Portfolio Website</h3>
                <figure>
                    <img src="project2.jpg" alt="Screenshot of portfolio website homepage" width="500" height="300">
                    <figcaption>A portfolio site for a local photographer</figcaption>
                </figure>
                <p>Designed and developed a custom portfolio website focusing on showcasing high-resolution photography.</p>
                <p><a href="#">View Project</a></p>
            </article>
        </section>
        
        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>HTML5 & CSS3</li>
                <li>JavaScript</li>
                <li>PHP</li>
                <li>WordPress Development</li>
                <li>Responsive Design</li>
                <li>SEO Best Practices</li>
            </ul>
        </section>
        
        <section id="contact">
            <h2>Contact Me</h2>
            <form action="submit-form.php" method="post">
                <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="message">Message:</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                
                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>
    
    <aside>
        <h2>Recent Blog Posts</h2>
        <ul>
            <li><a href="#">The Importance of Responsive Design</a></li>
            <li><a href="#">WordPress vs. Custom Development</a></li>
            <li><a href="#">Optimizing Images for the Web</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>© 2025 Jane Smith. All rights reserved.</p>
        <div class="social-links">
            <a href="#" aria-label="GitHub profile">GitHub</a>
            <a href="#" aria-label="LinkedIn profile">LinkedIn</a>
            <a href="#" aria-label="Twitter profile">Twitter</a>
        </div>
    </footer>
</body>
</html>

Looking Ahead

What's Coming Next

Now that you understand the essential HTML tags, we'll continue our journey by exploring:

  • HTML forms for collecting user input
  • CSS basics for styling your HTML elements
  • CSS layout techniques to arrange your elements on the page
  • Responsive design principles
  • JavaScript for adding interactivity

The foundation of HTML tags you've learned today will serve as the building blocks for everything else we create in this course.

Homework Assignment

Create a personal webpage that uses all the essential HTML tags we've covered today:

  1. Start with a proper HTML structure
  2. Use headings to create a logical hierarchy
  3. Include paragraphs with formatted text (bold, italic, etc.)
  4. Add links to other websites or pages
  5. Create both ordered and unordered lists
  6. Include at least one table with meaningful data
  7. Add at least two images with appropriate alt text
  8. Use semantic HTML elements to structure your page
  9. Validate your HTML using the W3C validator

This exercise will reinforce what you've learned and provide a starting point for future styling with CSS.

Additional Resources

Further Reading

Helpful Tools

HTML Tags Cheat Sheet

Quick Reference Table

Category Tag Purpose
Document Structure <!DOCTYPE html> Declares the document as HTML5
<html> Root element of an HTML page
<head> Contains meta-information about the document
<title> Defines the document title (browser tab)
<meta> Provides metadata about the HTML document
<body> Contains the visible page content
Text Content <h1> - <h6> Headings (h1 most important, h6 least)
<p> Paragraph
<br> Line break
<hr> Horizontal rule (line)
<pre> Preformatted text (preserves spaces and line breaks)
<blockquote> Block quotation
Text Formatting <strong> Important text (typically bold)
<em> Emphasized text (typically italic)
<mark> Highlighted text
<del> Deleted text (strikethrough)
<ins> Inserted text (underlined)
<sub> Subscript text
<sup> Superscript text
<code> Computer code
Lists <ul> Unordered list
<ol> Ordered list
<li> List item
Description Lists <dl> Description list
<dt> Term
<dd> Description
Links <a> Hyperlink
Images <img> Image
<figure> / <figcaption> Figure with caption
Table Elements <table> Table
<tr> Table row
<th> Table header cell
<td> Table data cell
Semantic Elements <header> Page or section header
<nav> Navigation links
<main> Main content of the document
<section> Thematic grouping of content
<article> Independent, self-contained content
<aside> Content tangentially related to the main content
<footer> Footer for a document or section
<time> Time or date
<address> Contact information

Wrapping Up

Key Takeaways

  • HTML tags provide structure and meaning to web content
  • Headings create a hierarchical outline of your document
  • Paragraphs and text formatting elements allow you to present text effectively
  • Links connect your content to other resources
  • Lists organize information in an easy-to-read format
  • Tables display structured data in rows and columns
  • Images add visual content to your pages
  • Semantic elements enhance the meaning and accessibility of your content

The HTML tags we've covered today form the foundation of every webpage you'll create. As you practice and become more familiar with these elements, you'll be able to create increasingly sophisticated web content.

In Our Next Session

Next time, we'll explore HTML forms and input elements, which allow you to collect data from your users. Forms are crucial for creating interactive websites and applications, and they build on the foundation of HTML tags we've established today.