Introduction to HTML

HTML (HyperText Markup Language) is the standard language used to create the structure of web pages. It tells web browsers how to display text, images, links, and other media. This guide covers the fundamental concepts, tags, and structure of HTML.

1. What is HTML?

HTML is not a programming language; it is a markup language. It uses a system of tags to label different parts of a web document.

An HTML element typically consists of an opening tag, the content, and a closing tag:

<p>This is a paragraph of text.</p>
  • <p> is the opening tag (starts the paragraph).
  • This is a paragraph of text. is the content.
  • </p> is the closing tag (ends the paragraph, indicated by the forward slash /).

Empty (Self-Closing) Elements

Some elements do not have content or a closing tag. These are called empty or self-closing elements. Example:

<br> <!-- Inserts a line break -->
<img src="image.jpg" alt="A descriptive image"> <!-- Displays an image -->

2. Basic Document Structure

Every HTML5 document requires a specific structure to be recognized correctly by web browsers. Below is the standard template:

<!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>Welcome to My Website</h1>
    <p>This is where the visible content goes.</p>
</body>
</html>

Explanation of the Structure:

  • <!DOCTYPE html>: Declares that this document is an HTML5 document.
  • <html lang="en">: The root element of the page. The lang attribute specifies the primary language (English, in this case).
  • <head>: Contains meta-information about the page that is not visible to the user, such as character encoding, page titles, and links to stylesheets.
  • <meta charset="UTF-8">: Defines the character encoding (supports almost all written languages).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the website renders properly on mobile devices.
  • <title>: Sets the title displayed in the browser tab.
  • <body>: Contains all the visible content of the webpage (text, images, links, etc.).

3. Essential HTML Elements

Headings

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

<h1>Main Heading</h1>
<h2>Sub-heading</h2>
<h3>Section Heading</h3>
<h4>Minor Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>

Paragraphs

Paragraphs are defined with the <p> tag. Browsers automatically add a small space (margin) before and after paragraphs.

<p>This is a paragraph of text that contains information.</p>

Formatting Text

You can format text within paragraphs or headings to emphasize meaning:

<p>This text is <strong>important (bold)</strong>.</p>
<p>This text is <em>emphasized (italic)</em>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <mark>highlighted text</mark>.</p>

4. Links and Images

Hyperlinks (Links)

Links are created using the <a> (anchor) tag. The href attribute specifies the destination URL.

<a href="https://www.example.com">Visit Example.com</a>

To open a link in a new browser tab, add the target="_blank" attribute:

<a href="https://www.example.com" target="_blank">Open in a new tab</a>

Images

Images are embedded using the <img> tag. This tag is self-closing and requires two main attributes:

  • src: The path or URL of the image.
  • alt: A text description of the image for accessibility and SEO.
<img src="logo.png" alt="Company Logo" width="200" height="100">

5. Lists

HTML supports two main types of lists: unordered (bulleted) and ordered (numbered).

Unordered List (<ul>)

Used for lists where the order of items does not matter.

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

Ordered List (<ol>)

Used for sequential steps or ranked items.

<ol>
    <li>Wake up</li>
    <li>Make coffee</li>
    <li>Start working</li>
</ol>

6. Block vs. Inline Elements

HTML elements generally fall into two categories: block-level and inline.

Block-Level Elements

These elements always start on a new line and take up the full width available.

  • Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <header>, <footer>.

Inline Elements

These elements do not start on a new line and only take up as much width as necessary.

  • Examples: <span>, <a>, <strong>, <em>, <img>.

Div and Span

  • <div> is a generic container used to group block-level elements for styling or layout.
  • <span> is a generic inline container used to style a specific part of text.
<div style="background-color: lightgrey;">
    <p>This paragraph is inside a <span style="color: red;">styled span</span> within a div.</p>
</div>

7. Semantic HTML

Semantic HTML elements clearly describe their meaning to both the browser and the developer. Using semantic tags improves search engine optimization (SEO) and website accessibility.

Instead of building a site entirely with <div> tags, use structural elements:

  • <header>: Defines a header for a document or section.
  • <nav>: Defines a set of navigation links.
  • <main>: Specifies the main content of the document.
  • <article>: Represents a self-contained composition (like a blog post).
  • <section>: Defines a thematic grouping of content.
  • <aside>: Defines content aside from the main content (like a sidebar).
  • <footer>: Defines a footer for a document or section.

Example layout:

<header>
    <h1>My Personal Blog</h1>
    <nav>
        <a href="#home">Home</a> | <a href="#about">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>My First Blog Post</h2>
        <p>This is the content of my post.</p>
    </article>
</main>

<footer>
    <p>&copy; 2026 My Website</p>
</footer>

8. HTML Forms

Forms are used to collect user input. The <form> element wraps various input controls.

<form action="/submit-form-endpoint" method="POST">
    <!-- Text Input -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter username" required>

    <br><br>

    <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <br><br>

    <!-- Dropdown Menu -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

    <br><br>

    <!-- Submit Button -->
    <button type="submit">Submit</button>
</form>

Key Form Elements:

  • <label>: Associates text with a form element (using the for attribute matching the input's id).
  • <input>: A versatile field for user input. The type attribute determines if it is a text box, checkbox, radio button, or file uploader.
  • required: An attribute that prevents form submission if the field is empty.

The guide was created in June 2026.