Introduction

HTML, or HyperText Markup Language, is the fundamental building block of the web. It provides the basic structure for all web pages, which is then enhanced and styled with technologies like CSS (Cascading Style Sheets) and made interactive with JavaScript. Every element you see on a webpage — headings, paragraphs, images, links, forms — is defined and controlled by HTML.

Invented by Tim Berners-Lee in the early 1990s, HTML has evolved significantly. The latest version, HTML5, introduces powerful new elements and APIs, improving semantics, multimedia handling, and performance.

HTML uses a system of tags and attributes to describe content. These tags are enclosed in angle brackets, like <h1> for a heading or <img> for a link. Most elements have an opening tag, some content, and a closing tag, although a few are self-closing like <img>.

Though simple in syntax, HTML forms the structural skeleton of the modern web. A strong grasp of HTML is essential for anyone starting in web development, as it sets the stage for everything else — including styling, scripting, and responsive design.

In this documentation, you'll explore HTML’s core features, structure, and practical use through clear examples and explanations. Whether you're new to coding or brushing up on fundamentals, this guide will provide a solid foundation to build from.

Highlights:

  • HTML structures content for the web.
  • Tags define content type and purpose.
  • Works with CSS and JS for full site functionality.
Basic Structure

Every HTML document starts with the <!DOCTYPE html> declaration, followed by the <html> tag that wraps the whole page. Inside it, we use <head> for metadata and <body> for visible content.

This structure ensures that web browsers can read and render the page correctly. Keeping this layout clean and valid is essential for SEO and accessibility.

Main tags:

  • <!DOCTYPE html>: Declares HTML5
  • <html>: Root element
  • <head>: Metadata (title,links)
  • <body>: Visual content
<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>
Headings and Paragraphs

HTML offers six levels of headings (<h1> to <h6>) used to organize content. <h1> represents the main title, and <h6> the smallest subheading. Using headings properly improves both structure and accessibility.

Paragraphs are written using the <p> tag. They wrap blocks of text, and browsers automatically add spacing to make text readable.

Tips:

  • Use only one <h1> per page.
  • Don't skip heading levels (e.g., from h1 to h3).
  • Wrap each thought in its own <p> tag.
<h1>Main Title</h1>
<h2>Subheading</h2>
<p>This is a paragraph explaining the topic.</p>
Images

To embed images, use the <img> tag. It's self-closing and requires src (source path) and alt (alternative text) attributes. Images enhance content, but accessibility and performance should be considered.

Use width and height to control image size, or better yet, use CSS. The alt text helps screen readers and improves SEO.

Good practices:

  • Always include alt text.
  • Use descriptive filenames.
  • Optimize image sizes for web.
<img src="netaji.jpg" alt="Portrait of Subhas Chandra Bose" width="300" loading="lazy">
Lists

HTML supports unordered lists (<ul>) for items without order and ordered lists (<ol>) for sequential items. Each item is placed inside a <li> tag.

Lists are useful for menus, feature highlights, steps, etc. They’re semantic and easy to style with CSS.

List types:

  • <ul>: Bulleted list
  • <ol>: Numbered list
  • <li>: Individual list item
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>Install VS Code</li>
  <li>Write HTML</li>
  <li>Save and run in browser</li>
</ol>
Elements and Attributes

An element consists of a tag and its content. Many elements can take attributes to control behavior or appearance. Attributes go inside the opening tag and follow a name="value" format.

Attributes like class, id, src, and herf are extremely common and often used with JavaScript or CSS for styling or logic.

Examples:

  • class: Applies CSS styles
  • id: Unique identifier
  • title: Tooltip on hover
<p class="info" id="main-text" title="Hover text">This is styled text.</p>
Divs and Spans

The <div> tag is a block-level container used for grouping elements. It has no semantic meaning but is often used for layout with CSS.

The <span> tag is an inline container used to style part of a line, such as coloring a single word inside a paragraph.

Key Differences:

  • <div>: Block container, used for layout
  • <span>: Inline container, used for inline text styling
<div class="box">
  <p>This is a block of content.</p>
</div>

<p>Click the <span style="color: red;">red text</span> to continue.</p>
Forms and Input Fields

Forms collect user input through fields like text boxes, checkboxes, and dropdowns. The <form> tag wraps inputs, and the action attribute defines where the data goes.

Each field uses the <input> tag with a type attribute. You can also label each field using the <label> tag for accessibility.

Common input types:

  • text, email, password
  • checkbox, radio, submit
<form action="/submit-form">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>
Semantic Elements

Semantic elements clearly describe their role in the structure of the page. This makes your code more readable and accessible to both humans and machines.

Tags like <header>, <nav>, <main>, <section>, and <footer> improve SEO and help screen readers better interpret the page layout.

Common semantic tags:

  • <header>: Intro section or logo
  • <nav>: Navigation bar
  • <section>: A distinct content block
  • <footer>: Page bottom or contact info
<header>
  <h1>My Blog</h1>
</header>

<nav>
  <a href="#intro">Introduction</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <section>
    <h2>Article</h2>
    <p>This is a blog post.</p>
  </section>
</main>

<footer>
  <p>© 2025 MySite</p>
</footer>
Conclusion

HTML is the starting point of any web project. While it may seem simple at first, understanding its full capabilities—including semantic structure, attributes, and accessibility—can make your websites much more powerful and professional.

By learning HTML well, you lay a strong foundation for deeper topics like responsive design, JavaScript frameworks, and modern web development workflows. The more you practice, the more it becomes second nature.

Key takeaways:

  • HTML is about structure, not style or behavior.
  • Clean, semantic code is better for users and machines.
  • Everything in web development builds on HTML.

All the documentation in this page is taken from MDN Web Docs.