LearnToDev

frontend

HTML Foundations

Understanding the skeleton of the web.

HTML Foundations 🏗️

HyperText Markup Language (HTML) is not a programming language; it's a markup language. It defines the structure of your content, much like how an architect's blueprint defines the structure of a building. Think of HTML as the skeleton that holds everything together on a web page.

Since its creation by Tim Berners-Lee in 1991, HTML has evolved into the foundation of every website you visit. Whether you're browsing social media, reading articles, or shopping online, HTML is working behind the scenes to structure that content.

1. Anatomy of an HTML Element

An element usually consists of a start tag, content, and an end tag. Understanding this structure is crucial because it's how browsers interpret and display your content.

<p>This is a paragraph.</p>
<!-- ^Start Tag    ^Content    ^End Tag -->

Some elements are self-closing and don't need an end tag because they don't contain content:

<img src="photo.jpg" alt="A beautiful sunset">
<br>
<hr>
<input type="text">

Attributes

Tags can have attributes that provide extra information or modify the element's behavior. They always appear in the start tag and follow a name-value pair format.

<a href="https://google.com" target="_blank" rel="noopener">Go to Google</a>
<!-- ^Attribute Name          ^Attribute Value -->

Common attributes you'll use frequently:

  • id - Unique identifier for the element
  • class - Groups elements for styling or scripting
  • src - Source file for images, videos, scripts
  • href - Destination URL for links
  • alt - Alternative text for images (crucial for accessibility)
  • title - Tooltip text that appears on hover
Accessibility Matters

Always include the alt attribute on images. Screen readers use this to describe images to visually impaired users. Good alt text is descriptive but concise: "Golden retriever puppy playing in a park" not just "dog."

2. The Document Structure

Every web page follows a standard boilerplate structure. This isn't just convention—browsers expect this structure to properly render your page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A brief description of your page">
    <title>My First Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is where the visible content goes.</p>
  </body>
</html>

Breaking Down the Boilerplate

<!DOCTYPE html> - Tells the browser this is an HTML5 document. Without this, browsers might render your page in "quirks mode," causing unexpected behavior.

<html lang="en"> - The root element. The lang attribute helps screen readers pronounce content correctly and assists search engines.

<meta charset="UTF-8"> - Sets character encoding to UTF-8, which supports virtually all characters from all languages. Without this, special characters might display incorrectly.

<meta name="viewport"> - Critical for responsive design. Tells mobile browsers how to scale your page.

Head vs. Body

  • <head>: The "brain" of the page. Contains metadata, titles, and links to CSS/JS. Users do not see this content directly. Think of it as the control room—it tells the browser how to handle and display your page.

  • <body>: The "body" of the page. Contains text, images, buttons, and everything users interact with. This is what people actually see and engage with.

Never confuse the <title> tag (browser tab name) with <h1> (main heading on the page). The title appears in browser tabs and search results, while h1 is the primary heading visitors see on your page.

3. Essential Tags Checklist

Memorize these common tags—you'll use them constantly:

Text Content

  • Headings: <h1> to <h6> - Create hierarchy (h1 is most important, h6 least)
  • Paragraphs: <p> - Main text blocks
  • Inline text: <span> - Style parts of text without breaking the line
  • Emphasis: <strong> (bold/important), <em> (italic/stressed)
  • Line breaks: <br> - Forces a line break (use sparingly!)

Structure & Layout

  • Generic container: <div> - Block-level grouping element
  • Semantic containers:
    • <header> - Page or section header
    • <nav> - Navigation links
    • <main> - Main content
    • <article> - Self-contained content
    • <section> - Thematic grouping
    • <aside> - Tangentially related content
    • <footer> - Page or section footer
Why Semantic HTML Matters

Using semantic tags like <nav>, <article>, and <footer> instead of just <div> improves accessibility, helps search engines understand your content, and makes your code more readable. It's a best practice that takes zero extra effort.

Lists

<!-- Unordered (bulleted) list -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

Media Elements

  • Images: <img src="path.jpg" alt="description"> (self-closing!)
  • Video: <video src="video.mp4" controls></video>
  • Audio: <audio src="sound.mp3" controls></audio>

Links & Navigation

<!-- External link -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</a>

<!-- Internal link -->
<a href="/about.html">About Us</a>

<!-- Link to section on same page -->
<a href="#contact">Jump to Contact</a>

Forms & Input

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form>

4. Comments in HTML

Comments help you (and other developers) understand your code. They're invisible to users but invaluable for documentation.

<!-- This is a single-line comment -->

<!-- 
  This is a multi-line comment
  You can write notes, explanations,
  or temporarily disable code here
-->

<p>Visible content</p>
<!-- <p>This paragraph won't display</p> -->

5. Best Practices

Use proper nesting - Close tags in the reverse order you opened them:

<!-- ✅ Correct -->
<div><p>Text here</p></div>

<!-- ❌ Incorrect -->
<div><p>Text here</div></p>

Indent consistently - Makes your code readable:

<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
    </nav>
  </header>
</body>

Use lowercase - While HTML is case-insensitive, lowercase is the standard:

<!-- ✅ Preferred -->
<div class="container"></div>

<!-- ❌ Avoid -->
<DIV CLASS="container"></DIV>

6. Resources for Going Deeper

Official Documentation:

Interactive Learning:

Practice & Validation:

Accessibility:

  • WebAIM - Learn about web accessibility
  • WAVE Tool - Test your pages for accessibility issues
Practice Challenge

Mini-Challenge: Create an index.html file in your learntodev-journey folder. Write a bio about yourself using at least 5 different tags. Include:

  • A main heading with your name
  • A paragraph about your background
  • An unordered list of your hobbies
  • A link to your favorite website
  • An image (can be from the internet)

Validate your HTML using the W3C Validator to ensure it's error-free!

Next Steps

Once you're comfortable with HTML structure, you'll learn CSS to make these elements look beautiful, and JavaScript to make them interactive. But remember: semantic, well-structured HTML is the foundation of everything else.

Every professional developer returns to HTML fundamentals regularly. Master this, and you're building on solid ground.