logo   Download Free Assets

How to Learn HTML: Step by Step — All HTML Basics

How to Learn HTML

HTML (HyperText Markup Language) is the skeleton of every webpage. If you’re starting web development, learning HTML is the first and most important step. This guide walks you through the essentials — from the very basics to practical examples you can copy, paste, and practice with. By the end you’ll know how to structure pages, format content, add images and links, work with tables and lists, control styling basics, and use IDs and classes for layout and targeted styling.

1. What is HTML?

HTML is not a programming language — it’s a markup language. It tells the browser what content is (headings, paragraphs, images, links) and establishes the document structure. CSS is used to style that content; JavaScript adds behavior. HTML is the foundation.

2. Your first HTML file

Create a file named index.html and paste this minimal page:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

Open index.html in your browser. You’ve just made a webpage.

3. Basic HTML structure explained

  • <!doctype html> declares the document type (modern HTML5).
  • <html lang="..."> wraps the whole document.
  • <head> contains metadata: <title>, character set, links to CSS, meta tags.
  • <body> contains visible page content: headings, paragraphs, images, links, etc.

4. Attributes: what they are and common examples

Attributes provide extra information about an element. They go inside the opening tag.

Example:

<img src="photo.jpg" alt="A photo of a golden retriever" width="400" />
<a href="https://example.com" target="_blank" rel="noopener">Visit site</a>

Common attributes:

  • id="unique-name" — unique identifier for an element.
  • class="some-class" — groups elements for styling.
  • src, alt — for images.
  • href, target, rel — for links.
  • width, height — size attributes (use CSS for better control).
  • title — adds a tooltip on hover.

5. Headings and paragraphs

Headings range from <h1> (most important) to <h6> (least important). Use headings to structure content semantically.

<h1>Main Title</h1>
<h2>Subsection</h2>
<p>This is a paragraph. Paragraphs are wrapped in &lt;p&gt; tags.</p>

Screen readers and SEO rely on heading structure, so use them logically — don’t skip from <h1> to <h4> without a reason.

6. Text formatting (bold, italic, underline, etc.)

Use semantic tags where possible:

<p>This is <strong>important</strong> text.</p>   <!-- bold, semantic -->
<p>This is <em>emphasized</em> text.</p>         <!-- italic, semantic -->
<p><u>Underlined text</u> but avoid overusing it (looks like links).</p>
<p><small>Small text / fine print.</small></p>
<p><mark>Highlighted text</mark></p>

Prefer <strong> and <em> over <b> and <i> when conveying meaning.

7. Quotations

Use <blockquote> for longer quotations and <q> for inline quotes.

<blockquote>
  <p>"The only way to do great work is to love what you do." — Steve Jobs</p>
</blockquote>

<p>He said <q>Practice makes perfect</q> and then started coding.</p>

<cite> can be used to cite sources or titles:

<p><cite>Harry Potter and the Sorcerer's Stone</cite> is a famous book.</p>

8. Comments in HTML

Comments are invisible to users and are for developers.

<!-- This is a comment: it won't show in the browser -->

Use comments to explain non-obvious markup or to temporarily disable code.

9. Colors in HTML

Colors are applied via CSS (recommended), not directly in HTML attributes.

Examples:

<style>
  .red-text { color: red; }
  .hex { color: #1a73e8; }       /* HEX */
  .rgb { color: rgb(26, 115, 232); } /* RGB */
</style>

<p class="red-text">This text is red.</p>
<p class="hex">This uses a HEX color.</p>
<p class="rgb">This uses RGB.</p>

Modern CSS also supports hsl() and CSS variables for consistent theming.

10. Images: <img> tag and examples

Basic image syntax:

<img src="images/myphoto.jpg" alt="Description of image" width="600" />

Important tips:

  • Always include alt text for accessibility and SEO.
  • Use appropriate file sizes and formats (.webp, .jpg, .png, .svg).
  • For responsive images, use srcset and sizes.
<img
  src="img-small.jpg"
  srcset="img-small.jpg 480w, img-medium.jpg 800w, img-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="Scenic mountain view">

11. Links: <a> tag and examples

Anchor tag creates hyperlinks:

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

Open in a new tab:

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

Link to a section on the same page (anchor links):

<a href="#contact">Go to Contact</a>
...
<section id="contact">Contact us here</section>

Email links:

<a href="mailto:someone@example.com">Send email</a>

Telephone links (mobile):

<a href="tel:+1234567890">Call us</a>

12. Favicon: how to add one

A favicon is the small icon in the browser tab. Put favicon.ico or a suitable PNG in your site root, then add this in <head>:

<link rel="icon" href="/favicon.ico">
<!-- Or for PNG -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

For better compatibility and PWA support, include multiple sizes and a manifest.json if needed.

13. Tables: structure and example

Use tables for tabular data, not for layout.

<table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
      <td>$2,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$12,500</td>
      <td>$2,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$22,500</td>
      <td>$4,500</td>
    </tr>
  </tfoot>
</table>

Accessibility: always use <th> for headers and add scope="col" or scope="row" when appropriate.

14. Lists: ordered, unordered, definition lists

Unordered (bullets):

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Ordered (numbers):

<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Definition lists (term + definition):

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

15. Block vs inline elements

  • Block elements start on a new line and take full width: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <table>.
  • Inline elements do not start a new line and only take necessary width: <span>, <a>, <img>, <strong>, <em>.

Use block elements for layout/sections and inline for text-level content. CSS display can override default behavior (display: block, display: inline, display: inline-block, display: flex, etc.).

16. <div>, IDs and classes — structure & styling

<div> is a generic block-level container. Use it to group elements. Prefer semantic elements (<header>, <nav>, <main>, <section>, <article>, <footer>) where possible.

IDs vs classes

  • id is unique: used for a single element on a page.
  • class can be reused on many elements.

Example:

<div id="header" class="container main-header">
  <h1 class="site-title">Site Title</h1>
  <nav class="main-nav">...</nav>
</div>

CSS:

#header { background: #f5f5f5; padding: 20px; }
.site-title { font-size: 2rem; }
.container { max-width: 1200px; margin: 0 auto; }

JavaScript often targets elements by id, while CSS styling and repeated layout rules use class.

17. Accessibility & best practices

  • Use semantic HTML (<nav>, <header>, <main>, <footer>, <article>, <section>).
  • Provide alt for images.
  • Use proper heading order.
  • Add aria- attributes only when needed (prefer native semantics first).
  • Make links descriptive (avoid “click here”).
  • Ensure color contrast for readability.
  • Use form labels (<label for="id">) and accessible table markup.

18. Quick cheatsheet of useful HTML tags

  • Document: <!doctype html>, <html>, <head>, <body>
  • Head: <title>, <meta>, <link>, <script>
  • Text: <p>, <h1>–<h6>, <span>, <strong>, <em>, <small>, <blockquote>, <q>
  • Media: <img>, <video>, <audio>
  • Links & navigation: <a>, <nav>
  • Lists & tables: <ul>, <ol>, <li>, <dl>, <table>, <tr>, <th>, <td>
  • Forms: <form>, <input>, <textarea>, <button>, <select>, <label>
  • Structure & semantics: <div>, <section>, <article>, <header>, <footer>, <main>, <aside>
  • Comments: <!-- comment -->

Example: Putting several concepts together

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample Page</title>
  <link rel="icon" href="/favicon-32x32.png">
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; }
    .container { max-width: 900px; margin: 0 auto; }
    header { margin-bottom: 20px; }
    nav ul { list-style: none; padding: 0; display: flex; gap: 10px; }
    nav a { text-decoration: none; }
    .highlight { background: #ffef96; padding: 4px; border-radius: 4px; }
    table { width: 100%; border-collapse: collapse; margin-top: 12px; }
    th, td { border: 1px solid #ddd; padding: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <header id="top">
      <h1 class="site-title">Welcome to My Sample Page</h1>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section id="about">
      <h2>About HTML</h2>
      <p>HTML structures the web. Use <strong>semantic</strong> tags and good markup for accessibility.</p>
    </section>

    <section id="gallery">
      <h2>Gallery</h2>
      <img src="mountain.jpg" alt="Mountain view" width="400">
      <p class="highlight">Tip: Always write clear alt text for images.</p>
    </section>

    <section id="data">
      <h2>Sales Table</h2>
      <table>
        <thead>
          <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr><td>Notebook</td><td>10</td><td>$5</td></tr>
          <tr><td>Pen</td><td>20</td><td>$1</td></tr>
        </tbody>
      </table>
    </section>

    <footer id="contact">
      <p>Contact: <a href="mailto:hello@example.com">hello@example.com</a></p>
    </footer>
  </div>
</body>
</html>

Final tips & next steps

  1. Practice: Build small pages — about you, a product, or a hobby.
  2. View source: Right-click any website and choose “View page source” to learn how others structure pages.
  3. Learn CSS: HTML + CSS = beautiful pages. Pick up CSS basics next (selectors, box model, flexbox, grid).
  4. Experiment: Try forms, responsive images (srcset), and semantic elements.
  5. Follow accessibility: Make pages usable for as many people as possible.