Chapter 2: HTML - The Structure of the Web

Frontend Developer Roadmap

What Exactly is HTML?

HTML is not a programming language; it is a markup language. Its job is to "mark up" or describe the content on a page using a system of tags. You use these tags to tell the browser, "This piece of text is a heading," "This is a paragraph," "This is an image," or "This is a link to another page." Without HTML, the web would be nothing more than unformatted text files.

The Basic Anatomy of an HTML Document

Every HTML page follows a fundamental structure. This boilerplate code is the starting point for any web project.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This is the content that will be visible on the page.</p>
    </body>
</html>
  • <!DOCTYPE html>: Defines the document as HTML5.
  • <html>: The root element of the page.
  • <head>: Contains meta-information (title, styles, scripts) not visible on the page.
  • <body>: Contains all the visible content of the webpage.

Core Building Blocks: Essential HTML Tags

Text Structuring: Headings, Paragraphs, and More

Structuring your text is fundamental to making it readable and meaningful.

  • Headings (`<h1>` to `<h6>`): Used to define a hierarchy of importance for your content. `<h1>` is the most important and should only be used once per page.
  • Paragraphs (`<p>`): The most common tag for blocks of text.
  • Semantic Text Formatting (`<strong>` and `<em>`): Use `<strong>` for important text (bold) and `<em>` for emphasized text (italic). They are preferred over `<b>` and `<i>` because they add meaning.
  • Code (`<code>` and `<pre>`): Use `<code>` for inline snippets and `<pre>` for larger blocks of preformatted code.

Creating Lists

Lists are perfect for organizing information.

  • Unordered Lists (`<ul>`): For a list of items where order doesn't matter (bullet points). Each item is defined by a `<li>` tag.
  • Ordered Lists (`<ol>`): For a list where order is important (numbers). Each item is also defined by a `<li>` tag.

Connecting the Web: Links (Anchors)

The `<a>` (anchor) tag creates hyperlinks. The `href` attribute specifies the destination URL. Use `target="_blank"` to open links in a new tab.

<a href="https://www.google.com" target="_blank">Go to Google</a>

Displaying Images

The `<img>` tag embeds an image. The `src` attribute is the path to the image file. The `alt` attribute provides alternative text, which is crucial for accessibility and SEO.

<img src="images/logo.png" alt="CodeWithMSMAXPRO company logo">

Structuring Data: Tables

Tables (`<table>`) are used to display data in rows (`<tr>`) and columns. Header cells are defined with `<th>` and data cells with `<td>`.

Interactivity: Building Forms

Forms are used to collect user input. The `<form>` element is the container. Key elements inside a form include:

  • `<label>`: Describes an input field. It's linked to the input via the `for` attribute.
  • `<input>`: The most versatile form element. Its `type` attribute can be `text`, `password`, `email`, `checkbox`, `radio`, `submit`, etc.
  • `<textarea>`: For multi-line text input.
  • `<select>` and `<option>`: Creates a dropdown list.

The Modern Standard: Semantic HTML5

Instead of using `<div>` for everything, HTML5 provides semantic elements that describe their content. Using these tags improves readability, accessibility, and SEO.

  • <header>: For introductory content or navigation.
  • <nav>: Specifically for major navigation links.
  • <main>: For the main content of the page.
  • <section>: For a thematic grouping of content.
  • <article>: For self-contained content like a blog post.
  • <aside>: For tangentially related content, like a sidebar.
  • <footer>: For the footer of a page or section.

Multimedia on the Web

HTML5 makes it easy to embed media directly:

  • `<video>`: To embed video files. Use the `controls` attribute to show play/pause controls.
  • `<audio>`: To embed audio files.
  • `<iframe>`: To embed content from other websites, such as YouTube videos or Google Maps.

Best Practices and Validation

  • Indentation: Always indent your code to show the parent-child hierarchy.
  • Comments: Use `<!-- This is a comment -->` to explain your code.
  • Validation: Use the W3C Markup Validation Service to check your code for errors.

By mastering these elements, you have built the strong foundation upon which your entire frontend career will stand. In the next chapter, we will bring this skeleton to life with the power of CSS.

Continue to Chapter 3: CSS Basics →