HTML Fundamentals: Build Web Pages from Scratch

Text Content: Headings, Paragraphs, and Semantic Markup

Understanding the Role of Text Content

Text is the foundation of web content. While images, videos, and interactive elements capture attention, text communicates ideas clearly and ensures your content is accessible to all users—including those using screen readers or browsing on slow connections. Learning to structure text properly using HTML elements is essential for creating professional, accessible web pages.

Heading Hierarchy

Headings organize content into a logical structure using six levels: <h1> through <h6>. Each page should have exactly one <h1> tag, which represents the main topic of the page.

• <h1> – Main page title (use only once per page)
• <h2> – Major section headings
• <h3> – Subsections within <h2> sections
• <h4>, <h5>, <h6> – Further subdivisions

Think of heading levels like an outline. Skipping levels (for example, jumping from <h1> to <h3>) confuses screen readers and breaks logical structure. Always nest headings in sequential order for accessibility and SEO benefits.

<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<h3>My Background</h3>
<h3>My Skills</h3>
<h2>Recent Projects</h2>

Paragraphs and Text Organization

The <p> tag wraps text into paragraphs, providing essential spacing and semantic meaning. Browsers automatically add margins around paragraphs, improving readability. Each <p> should contain a single idea or thought, making content scannable and digestible.

Use <br> for line breaks within content (like poetry or addresses), but avoid using multiple <br> tags to create spacing—use CSS instead. Similarly, the <hr> element creates a thematic break between sections.

Semantic Markup for Emphasis

Semantic HTML uses meaningful tags that convey intent, not just appearance. This distinction matters for accessibility and search engines.

• <strong> indicates important text; browsers render it bold, but screen readers emphasize it
• <em> indicates emphasized text; browsers italicize it, with vocal emphasis from screen readers
• <b> is purely visual bold without semantic importance (use sparingly)
• <i> is purely visual italic without emphasis (use for technical terms or foreign words)

<p>This is <strong>critically important</strong> information.</p>
<p>The word <em>very</em> changes the meaning here.</p>
<p>The ship's name was the <i>HMS Endeavour</i>.</p>

Additional Semantic Elements

Beyond headings and paragraphs, HTML provides meaningful text containers:

• <blockquote> – Extended quotations with proper semantic value
• <cite> – Citation or reference to a creative work
• <code> – Computer code snippets (monospace font by default)
• <mark> – Highlighted or marked text for reference

Best Practices

1. Plan your heading structure before writing. Outline major sections with <h2>, subsections with <h3>, etc.
2. Use semantic tags consistently. Prioritize <strong> and <em> over <b> and <i>.
3. Write concise paragraphs. Aim for 2–4 sentences per paragraph for web readability.
4. Never use headings for styling. If text needs visual emphasis but isn't hierarchical, use CSS instead.
5. Test with screen readers. Ensure your heading structure makes sense to assistive technology users.

By mastering text markup, you create pages that are not only visually organized but also meaningful to all users and search engines.

Links and Navigation

Understanding HTML Links

Links are the foundation of web navigation, allowing users to move between pages and resources across the internet. In HTML, links are created using the anchor element (<a>), which stands for "anchor." This element transforms text or images into clickable navigation items that direct users to new destinations.

The most important attribute of the anchor element is href (hypertext reference), which specifies the destination URL or file path. Without the href attribute, the anchor tag won't function as a link. For example: <a href="https://example.com">Visit Example</a> creates a clickable link with the text "Visit Example" that directs to example.com.

Types of Links

There are three main categories of links you'll work with:

Absolute Links point to complete web addresses, including the protocol (http:// or https://). These are used when linking to external websites: <a href="https://www.google.com">Search Google</a>. Absolute links work regardless of where your page is located.

Relative Links point to files within your own website using partial paths. If you have a page called "about.html" in the same folder, you'd link it as: <a href="about.html">About Us</a>. Relative links are more flexible when moving your site to different servers.

Anchor Links direct users to specific sections within the same page or another page using the hash symbol (#). First, create a target with an id attribute: <h2 id="contact">Contact</h2>, then link to it: <a href="#contact">Go to Contact</a>. This creates a smoother user experience for longer pages.

Building Effective Navigation

Navigation structures organize how users move through your website. A navigation menu is typically placed in a header and contains links to main sections. Use semantic HTML with the <nav> element to mark navigation areas:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="services.html">Services</a>
  <a href="contact.html">Contact</a>
</nav>

Best practices for navigation include keeping menus simple and organized, using clear descriptive link text (avoid vague phrases like "click here"), and maintaining consistency across your site. Always test that links work correctly and point to the intended destinations.

Advanced Link Features

The target attribute controls where links open. target="_blank" opens links in a new tab or window, useful for external sites so users don't leave your page. The title attribute provides additional information: <a href="page.html" title="Learn more about us">About</a> shows a tooltip when users hover over the link.

You can also create email links using mailto: in the href: <a href="mailto:info@example.com">Email Us</a>. This opens the user's default email client ready to send a message.

Links are essential for creating an intuitive user experience. Proper link implementation, clear navigation structure, and thoughtful organization make your website accessible and easy to explore. Focus on making links descriptive and ensuring all navigation paths work smoothly to keep visitors engaged with your content.

Images and Media

Introduction to Web Media

Adding images and media to your web pages transforms static text into engaging, visual content. HTML provides semantic elements and attributes that allow you to embed images, audio, and video while maintaining code clarity and accessibility. Understanding how to properly implement these elements is essential for creating professional, user-friendly websites.

The Image Element

The <img> tag is the fundamental HTML element for displaying images. Unlike most HTML tags, <img> is self-closing and does not require a closing tag. Every image element requires two critical attributes:

• src (source): Specifies the path to the image file (e.g., src="photo.jpg")
• alt (alternative text): Provides descriptive text for screen readers and displays when images fail to load

<img src="images/sunset.jpg" alt="Beautiful sunset over ocean">

The alt attribute serves dual purposes: it improves accessibility for visually impaired users and provides context when images cannot display due to connection issues. Always write descriptive, meaningful alt text rather than generic phrases.

Additional useful attributes include width and height, which you can specify in pixels to control display size, and title, which shows a tooltip on hover.

Image Formats and Optimization

Different image formats serve different purposes. JPEG files work best for photographs and complex images with many colors. PNG files support transparency and work well for graphics and icons. WebP is a modern format offering better compression. GIF can display animations but uses larger file sizes.

Optimize images by reducing file size without sacrificing quality. Smaller files load faster, improving user experience and search engine rankings. Use tools to compress images and choose appropriate formats for your content type.

Audio and Video Elements

HTML5 introduced the <audio> and <video> tags, which embed multimedia directly without requiring plugins like Flash. Both elements use similar syntax with a src attribute or nested <source> elements:

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

<video width="400" height="300" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support video.
</video>

The controls attribute enables play/pause buttons and volume sliders. The width and height attributes define video dimensions. Nested <source> elements allow you to specify multiple formats for broader browser compatibility—browsers will play the first supported format.

Best Practices

Always optimize media files before uploading to reduce bandwidth consumption. Provide fallback content within audio and video tags for older browsers. Use semantic HTML by choosing appropriate media elements rather than workarounds. Consider accessibility by adding captions and transcripts to audio and video content.

Responsive design matters: use CSS to make images and videos scale appropriately across different device sizes. Mobile users especially benefit from properly sized media that doesn't consume excessive data.

By mastering images and media elements, you create richer, more engaging web experiences while maintaining clean, accessible code.

HTML Forms: Inputs, Validation, and Submission

Introduction to HTML Forms

HTML forms are one of the most important tools for collecting user data on the web. Whether you're building a contact form, a login page, or a survey, forms allow users to send information to a server for processing. A form consists of various input elements enclosed within a <form> tag, each designed to capture different types of data.

The Form Structure

Every form begins with the <form> tag and includes two essential attributes: action and method. The action attribute specifies where the form data will be sent (typically a server-side script), while the method attribute defines how the data travels—either GET (data in URL) or POST (data in request body, more secure for sensitive information).

<form action="submit.php" method="POST">
  <!-- form inputs go here -->
</form>

Common Input Types

HTML provides many input types to match different data needs:

• Text inputs: <input type="text"> for single-line text
• Email: <input type="email"> for email addresses with built-in validation
• Password: <input type="password"> masks characters for security
• Number: <input type="number"> accepts only numeric values
• Checkbox: <input type="checkbox"> allows multiple selections
• Radio buttons: <input type="radio"> restricts to one selection per group
• Textarea: <textarea> for longer multi-line text input
• Select dropdown: <select> with <option> tags for predefined choices
• Submit button: <input type="submit"> sends the form data

Labels and Accessibility

Always pair inputs with labels using the <label> tag. Labels improve usability and accessibility by allowing users to click on the label text to focus the input. Link them with the for attribute matching the input's id:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Form Validation

Validation ensures users submit correct data. HTML5 provides built-in validation attributes:

• required: The field must be filled
• minlength and maxlength: Control text length
• min and max: Set ranges for numbers
• pattern: Uses regular expressions for custom rules
• type checking: Email and number inputs validate automatically

<input type="email" required>
<input type="password" minlength="8" required>
<input type="number" min="1" max="100">

Client-side validation happens in the browser before submission, providing instant feedback. However, always validate on the server as well, since users can bypass browser validation.

Form Submission

When users click a submit button, the form collects all input values and sends them to the server. The data format depends on the method:

• GET: Data appears in the URL as query parameters (visible, not secure)
• POST: Data travels in the request body (hidden, more secure)

Best Practices

Create user-friendly forms by:

1. Organize logically - Group related fields together
2. Use clear labels - Users should understand what each field requires
3. Provide feedback - Show validation errors near the problematic fields
4. Test thoroughly - Verify submission works and data reaches the server
5. Keep it simple - Only ask for essential information
6. Use placeholders sparingly - They disappear when typing, confusing users

Forms are the bridge between users and your application. Mastering form creation ensures smooth data collection and positive user experiences.

Lists, Tables, and Data Organization

Organizing information on web pages is essential for readability and user experience. HTML provides several semantic elements to structure different types of content, with lists and tables being among the most important. Understanding when and how to use these elements properly ensures your web pages are both accessible and maintainable.

Understanding HTML Lists

Lists are used to group related items together. HTML supports three main types of lists, each serving a different purpose.

Unordered lists (<ul>) display items with bullet points and work best for collections where order doesn't matter—like shopping lists, features, or navigation menus. Each item is wrapped in <li> tags:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

Ordered lists (<ol>) use numbers and are ideal for step-by-step instructions, rankings, or processes where sequence matters. The structure is identical to unordered lists, but the browser automatically numbers items:

<ol>
  <li>Mix ingredients</li>
  <li>Pour into pan</li>
  <li>Bake for 30 minutes</li>
</ol>

Description lists (<dl>) pair terms with definitions or descriptions. They use <dt> for the term and <dd> for the description. These are less common but perfect for glossaries, specifications, or Q&A sections:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language used for web pages</dd>
</dl>

Lists can also be nested by placing a new list inside an <li> element, creating multi-level hierarchies useful for complex outlines or navigation structures.

Organizing Data with Tables

Tables organize data into rows and columns, making complex information scannable and comparable. A basic table uses these core elements:

• <table> - the container for the entire table
• <tr> - defines a table row
• <th> - defines a header cell (bold and semantically important)
• <td> - defines a data cell

Here's a practical example:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$899</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$25</td>
  </tr>
</table>

For better organization and accessibility, use semantic table elements:

• <thead> - groups header rows
• <tbody> - groups body rows
• <tfoot> - groups footer rows (totals, notes, etc.)

This structure helps both screen readers and developers understand the table's purpose and layout.

Best Practices for Data Organization

Choose the right tool for your content: use lists for simple groupings and tables for comparative data. Never use tables for page layout—this is outdated and damages accessibility.

Avoid common mistakes: Don't nest tables excessively, don't leave cells empty without explanation, and always use <th> headers to give context to data columns.

Remember that semantic HTML isn't just about correctness—it improves search engine optimization, makes your content accessible to screen readers, and makes your code easier to maintain. Proper use of lists and tables demonstrates professional web development practices.

HTML Best Practices and Debugging

Writing clean, maintainable HTML is just as important as making it functional. Following best practices ensures your code is easy to understand, debug, and modify. This lesson covers essential strategies for writing quality HTML and identifying common problems.

Writing Semantic HTML

Semantic HTML means using elements that clearly describe their purpose. Instead of wrapping content in generic <div> tags, use meaningful elements like <header>, <nav>, <main>, <article>, <section>, and <footer>. This approach benefits both humans reading your code and search engines indexing your content.

For example, use <button> for clickable elements instead of <div onclick="">. Use <nav> to wrap navigation links, and <header> for introductory content. Semantic HTML makes your code self-documenting and improves accessibility for users with screen readers.

Proper Document Structure

Every HTML document should follow a consistent structure. Always include the DOCTYPE declaration at the top: <!DOCTYPE html>. Use the <html>, <head>, and <body> tags correctly. Place metadata, links to stylesheets, and scripts in the <head>, while all visible content goes in the <body>.

Maintain consistent indentation and formatting. Properly indented code is significantly easier to read and debug. Most modern code editors automatically format HTML for you, so use this feature to keep your files organized.

Validation and Common Errors

HTML validation checks your code against official standards. Use the W3C Markup Validation Service (validator.w3.org) to identify errors. Common mistakes include:

• Unclosed tags: Always close tags like <p>, <div>, and <li>. While browsers often forgive this, it can cause unexpected behavior.
• Incorrect nesting: Place tags in the correct order. For example, lists must have <li> items inside <ul> or <ol>, not the other way around.
• Missing attributes: Images require alt attributes for accessibility. Links need href attributes.
• Invalid attribute values: Ensure IDs are unique, class names follow naming conventions, and attribute values are properly quoted.

Using Browser Developer Tools

Modern browsers include Developer Tools that help debug HTML. Press F12 or right-click and select "Inspect" to examine your page's structure. The Elements panel shows your HTML with applied CSS. If something looks wrong visually, inspect it to see the actual HTML and spot mistakes.

You can also use the console to check for errors and warnings. The Network tab shows how resources load, helping identify missing images or broken file paths.

Accessibility and Best Practices

Make your HTML accessible to all users. Include alt text for images, use proper heading hierarchies (<h1> through <h6>), and ensure form labels are associated with inputs using the <label> element. Never skip heading levels—go from <h1> to <h2>, not directly to <h3>.

Use semantic landmarks like <main> for primary content, <aside> for supplementary information, and <article> for independent content blocks. These help screen readers navigate your page effectively.

File Management

Keep your project organized. Use descriptive filenames in lowercase with hyphens (e.g., contact-form.html). Place all HTML files in a logical folder structure. Link to resources using relative paths when possible: <a href="../images/photo.jpg"> rather than absolute paths.

Following these best practices creates professional, maintainable HTML that works reliably across devices and assistive technologies.