Skip to main content

hassolution.net

1. What is HTML?

HTML describes the structure of a webpage using elements/tags.

A simple webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>

<body>
    <h1>Hello World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

How HTML works

HTML
 │
 ├── Document
 │    ├── Head
 │    │    ├── Title
 │    │    ├── Meta information
 │    │    └── CSS links
 │    │
 │    └── Body
 │         ├── Headings
 │         ├── Paragraphs
 │         ├── Images
 │         ├── Links
 │         ├── Tables
 │         └── Forms

2. Basic HTML Structure

Every normal HTML document should start with:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Website</title>
</head>

<body>

    <h1>Hello World</h1>

</body>

</html>

Explanation

<!DOCTYPE html>

Tells the browser that the document uses modern HTML.

<!DOCTYPE html>

<html>

The root element of the webpage.

<html>
</html>

<head>

Contains information about the document.

<head>
    <title>My Website</title>
</head>

<body>

Contains the visible webpage content.

<body>
    <h1>Hello</h1>
</body>

<title>

Sets the browser tab title.

<title>My Website</title>

3. HTML Elements

Most HTML elements have:

<opening-tag>
    Content
</closing-tag>

Example:

<p>Hello World</p>

Here:

<p>       → opening tag
Hello     → content
</p>      → closing tag

The entire thing is an element.


4. HTML Attributes

Attributes provide additional information about an element.

Syntax:

<tag attribute="value">

Example:

<p class="intro">Hello World</p>

Another example:

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

Here:

href = attribute
https://example.com = value

5. HTML Comments

Comments are ignored by the browser.

<!-- This is a comment -->

Example:

<!-- Main heading -->
<h1>My Website</h1>

Comments are useful for explaining your code.


6. Headings

HTML provides six heading levels.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Example

<h1>My Website</h1>
<h2>About Me</h2>
<h3>My Skills</h3>
<h4>HTML</h4>
<h5>CSS</h5>
<h6>JavaScript</h6>

Important

Use <h1> for the main page heading and organize lower-level headings logically.

Don’t choose headings only because they look bigger. CSS should control visual appearance.


7. Paragraph

The <p> element creates a paragraph.

<p>This is a paragraph.</p>

Example:

<p>
    HTML is used to create the structure of websites.
</p>

8. Line Break

The <br> element creates a line break.

<p>Hello<br>World</p>

Output:

Hello
World

<br> is a void element, so it does not need:

</br>

9. Horizontal Rule

<hr> creates a thematic horizontal line.

<hr>

Example:

<h2>About Me</h2>

<p>I am a web developer.</p>

<hr>

<h2>My Skills</h2>

10. Bold Text

<strong>

Use <strong> when the content has strong importance.

<strong>Important information</strong>

<b>

<b> visually draws attention without implying importance.

<b>Bold text</b>

Prefer semantic elements such as <strong> when appropriate.


11. Italic Text

<em>

Used for emphasis.

<em>This text is emphasized.</em>

<i>

Used for text in an alternate voice or style where emphasis isn’t the meaning.

<i>This is italic text.</i>

12. Underline

<u>Underlined text</u>

Example:

<p>This is <u>underlined</u> text.</p>

Don’t use <u> just for decoration when CSS is more appropriate.


13. Other Text Formatting Tags

<mark>

Highlights text.

<mark>Important text</mark>

<small>

Displays side comments or small print.

<small>Terms and conditions apply.</small>

<del>

Represents deleted content.

<del>$100</del>

<ins>

Represents inserted content.

<ins>$80</ins>

<sub>

Subscript.

H<sub>2</sub>O

<sup>

Superscript.

x<sup>2</sup>

Complete example

<p>
    <strong>Important:</strong>
    Water is H<sub>2</sub>O.
</p>

<p>
    Old price:
    <del>$100</del>
</p>

<p>
    New price:
    <ins>$80</ins>
</p>

<p>
    E = mc<sup>2</sup>
</p>

<p>
    <mark>HTML is important.</mark>
</p>

14. Links

The <a> element creates hyperlinks.

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

Open in a new tab

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

For external links opened in a new tab, you can also use:

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

15. Email Links

<a href="mailto:example@example.com">
    Email Me
</a>

16. Telephone Links

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

17. Download Links

<a href="files/notes.pdf" download>
    Download Notes
</a>

18. Images

The <img> element displays an image.

<img src="image.jpg" alt="A beautiful landscape">

Important attributes:

src → image location
alt → alternative text
width → width
height → height

Example:

<img
    src="cat.jpg"
    alt="A white cat sitting on a chair"
    width="400"
>

Why alt matters

Alternative text helps users who:

  • use screen readers

  • have images disabled

  • experience image loading problems


19. Figure and Figcaption

Use <figure> for self-contained visual content.

<figure>

    <img
        src="mountain.jpg"
        alt="Snow covered mountain"
    >

    <figcaption>
        A beautiful mountain.
    </figcaption>

</figure>

20. Lists

HTML has three main types of lists:

  1. Unordered list

  2. Ordered list

  3. Description list


Unordered List

Uses <ul> and <li>.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Ordered List

Uses <ol> and <li>.

<ol>
    <li>Open your editor.</li>
    <li>Create an HTML file.</li>
    <li>Write your code.</li>
    <li>Open it in a browser.</li>
</ol>

Ordered List with Different Start

<ol start="5">
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
</ol>

Description List

Uses:

<dl>  → description list
<dt>  → term
<dd>  → description

Example:

<dl>

    <dt>HTML</dt>
    <dd>Structures web pages.</dd>

    <dt>CSS</dt>
    <dd>Styles web pages.</dd>

    <dt>JavaScript</dt>
    <dd>Adds behavior to web pages.</dd>

</dl>

21. Nested Lists

Lists can contain other lists.

<ul>

    <li>
        Frontend

        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>

    </li>

    <li>
        Backend

        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>

    </li>

</ul>

22. div

<div> is a generic block-level container.

<div>
    <h2>About Me</h2>
    <p>I am learning HTML.</p>
</div>

It is commonly used with CSS and JavaScript.


23. span

<span> is a generic inline container.

<p>
    My favorite color is
    <span>blue</span>.
</p>

Example with CSS:

<style>
    .red {
        color: red;
    }
</style>

<p>
    This is
    <span class="red">red text</span>.
</p>

24. HTML Tables

A table uses:

<table>
<tr>    → table row
<th>    → table header
<td>    → table data

Example:

<table border="1">

    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Ali</td>
        <td>20</td>
    </tr>

    <tr>
        <td>Ahmed</td>
        <td>22</td>
    </tr>

</table>

25. Better Table Structure

Use:

<table>

    <caption>Student Information</caption>

    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Course</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Ali</td>
            <td>20</td>
            <td>HTML</td>
        </tr>

        <tr>
            <td>Ahmed</td>
            <td>22</td>
            <td>CSS</td>
        </tr>

    </tbody>

    <tfoot>
        <tr>
            <td colspan="3">2 Students</td>
        </tr>
    </tfoot>

</table>

26. colspan

Allows a cell to span multiple columns.

<table border="1">

    <tr>
        <th colspan="2">Student</th>
    </tr>

    <tr>
        <td>Ali</td>
        <td>20</td>
    </tr>

</table>

27. rowspan

Allows a cell to span multiple rows.

<table border="1">

    <tr>
        <th rowspan="2">Name</th>
        <td>Ali</td>
    </tr>

    <tr>
        <td>Ahmed</td>
    </tr>

</table>

28. Forms

Forms collect user information.

Basic example:

<form>

    <label for="name">Name:</label>

    <input
        type="text"
        id="name"
        name="name"
    >

    <button type="submit">
        Submit
    </button>

</form>

29. <label>

A label describes an input.

<label for="email">
    Email:
</label>

<input
    type="email"
    id="email"
    name="email"
>

The for value should match the input’s id.


30. Text Input

<input
    type="text"
    name="username"
    placeholder="Enter your username"
>

31. Password Input

<input
    type="password"
    name="password"
    placeholder="Enter password"
>

32. Email Input

<input
    type="email"
    name="email"
    placeholder="you@example.com"
>

33. Number Input

<input
    type="number"
    name="age"
    min="1"
    max="100"
>

34. Date Input

<input
    type="date"
    name="birthday"
>

35. Time Input

<input
    type="time"
    name="appointment"
>

36. Color Input

<input
    type="color"
    name="favoriteColor"
>

37. Range Input

<input
    type="range"
    min="0"
    max="100"
    value="50"
>

38. Checkbox

Checkboxes allow multiple selections.

<label>
    <input type="checkbox" name="skills" value="html">
    HTML
</label>

<label>
    <input type="checkbox" name="skills" value="css">
    CSS
</label>

<label>
    <input type="checkbox" name="skills" value="js">
    JavaScript
</label>

39. Radio Buttons

Radio buttons are commonly used when the user should select one option.

<p>Gender:</p>

<label>
    <input
        type="radio"
        name="gender"
        value="male"
    >
    Male
</label>

<label>
    <input
        type="radio"
        name="gender"
        value="female"
    >
    Female
</label>

The same name groups the radio buttons.


40. Select Dropdown

<label for="country">
    Country:
</label>

<select id="country" name="country">

    <option value="pakistan">
        Pakistan
    </option>

    <option value="india">
        India
    </option>

    <option value="usa">
        USA
    </option>

</select>

41. Textarea

Used for multiple lines of text.

<label for="message">
    Message:
</label>

<textarea
    id="message"
    name="message"
    rows="5"
    cols="30"
></textarea>

42. Button

<button type="button">
    Click Me
</button>

Submit button:

<button type="submit">
    Submit
</button>

Reset button:

<button type="reset">
    Reset
</button>

43. Complete Form

<form action="/submit" method="post">

    <div>
        <label for="name">Name:</label>

        <input
            type="text"
            id="name"
            name="name"
            required
        >
    </div>

    <br>

    <div>
        <label for="email">Email:</label>

        <input
            type="email"
            id="email"
            name="email"
            required
        >
    </div>

    <br>

    <div>
        <label for="password">Password:</label>

        <input
            type="password"
            id="password"
            name="password"
            required
        >
    </div>

    <br>

    <div>
        <label for="country">Country:</label>

        <select
            id="country"
            name="country"
        >
            <option value="pk">Pakistan</option>
            <option value="in">India</option>
            <option value="us">USA</option>
        </select>
    </div>

    <br>

    <div>
        <label for="message">Message:</label>

        <textarea
            id="message"
            name="message"
            rows="5"
        ></textarea>
    </div>

    <br>

    <button type="submit">
        Register
    </button>

</form>

44. Important Form Attributes

required

Makes a field required.

<input type="text" required>

placeholder

Shows temporary guidance.

<input
    type="text"
    placeholder="Enter your name"
>

value

Sets an initial value.

<input
    type="text"
    value="Ali"
>

disabled

Disables an input.

<input
    type="text"
    disabled
>

readonly

Prevents editing while keeping the value available.

<input
    type="text"
    value="User123"
    readonly
>

min and max

<input
    type="number"
    min="1"
    max="100"
>

minlength and maxlength

<input
    type="text"
    minlength="3"
    maxlength="20"
>

45. fieldset and legend

Useful for grouping related form controls.

<form>

    <fieldset>

        <legend>Personal Information</legend>

        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            name="name"
        >

        <br><br>

        <label for="email">Email:</label>
        <input
            type="email"
            id="email"
            name="email"
        >

    </fieldset>

</form>

46. Semantic HTML

Semantic HTML gives elements meaningful names.

Instead of:

<div class="header">

use:

<header>

Instead of:

<div class="navigation">

use:

<nav>

Semantic HTML improves:

  • accessibility

  • document structure

  • maintainability

  • search-engine understanding


47. <header>

Represents introductory content.

<header>

    <h1>My Website</h1>

    <p>Welcome to my website.</p>

</header>

48. <nav>

Represents navigation links.

<nav>

    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>

</nav>

49. <main>

Contains the main content of the page.

<main>

    <h1>Welcome</h1>

    <p>
        This is the main content.
    </p>

</main>

A document normally has one main content region.


50. <section>

Represents a thematic section.

<section>

    <h2>About Us</h2>

    <p>
        We build websites.
    </p>

</section>

51. <article>

Represents independent content.

<article>

    <h2>How to Learn HTML</h2>

    <p>
        Start with HTML structure,
        then learn CSS and JavaScript.
    </p>

</article>

Good examples include:

  • blog posts

  • news articles

  • forum posts

  • product cards


52. <aside>

Represents related or secondary content.

<aside>

    <h2>Related Articles</h2>

    <ul>
        <li>Learn CSS</li>
        <li>Learn JavaScript</li>
    </ul>

</aside>

53. <footer>

Represents footer content.

<footer>

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

</footer>

54. Complete Semantic Layout

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Semantic Website</title>

</head>

<body>

    <header>

        <h1>My Website</h1>

        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>

    </header>


    <main>

        <section>

            <h2>Latest Articles</h2>

            <article>

                <h3>Learning HTML</h3>

                <p>
                    HTML is the foundation
                    of the web.
                </p>

            </article>

            <article>

                <h3>Learning CSS</h3>

                <p>
                    CSS is used to style
                    web pages.
                </p>

            </article>

        </section>


        <aside>

            <h2>Advertisement</h2>

            <p>
                Related content goes here.
            </p>

        </aside>

    </main>


    <footer>

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

    </footer>

</body>

</html>

55. Audio

The <audio> element embeds audio.

<audio controls>

    <source
        src="music.mp3"
        type="audio/mpeg"
    >

    Your browser does not support audio.

</audio>

56. Video

<video
    controls
    width="600"
>

    <source
        src="video.mp4"
        type="video/mp4"
    >

    Your browser does not support video.

</video>

Useful attributes:

controls
autoplay
muted
loop
poster
width
height

Example:

<video
    controls
    muted
    loop
    poster="thumbnail.jpg"
    width="600"
>
    <source
        src="video.mp4"
        type="video/mp4"
    >
</video>

57. YouTube / External Video

You can embed external content with <iframe>.

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video"
    allowfullscreen
></iframe>

58. <iframe>

An iframe embeds another webpage or document.

<iframe
    src="https://example.com"
    width="600"
    height="400"
    title="Example website"
></iframe>

Be careful with third-party content and security.


59. <details> and <summary>

Creates a built-in expandable section.

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML is HyperText Markup Language.
    </p>

</details>

Very useful for FAQs.


60. <dialog>

Represents a dialog box.

<dialog open>

    <h2>Hello!</h2>

    <p>
        This is a dialog.
    </p>

    <button>
        Close
    </button>

</dialog>

In real applications, JavaScript is commonly used to open and close dialogs.


61. <progress>

Shows progress.

<label for="progress">
    Download progress:
</label>

<progress
    id="progress"
    value="70"
    max="100"
>
    70%
</progress>

62. <meter>

Represents a measurement within a known range.

<label for="storage">
    Storage:
</label>

<meter
    id="storage"
    min="0"
    max="100"
    value="75"
>
    75%
</meter>

63. <time>

Represents a date or time.

<time datetime="2026-09-21">
    September 21, 2026
</time>

Another example:

<time datetime="2026-09-21T10:30">
    10:30 AM
</time>

64. <abbr>

Represents an abbreviation.

<abbr title="HyperText Markup Language">
    HTML
</abbr>

65. <address>

Represents contact information.

<address>

    Written by Ali.<br>

    Email:
    <a href="mailto:ali@example.com">
        ali@example.com
    </a>

</address>

66. <blockquote>

For longer quotations.

<blockquote cite="https://example.com">

    Learning never stops.

</blockquote>

67. <q>

For short inline quotations.

<p>
    He said,
    <q>Practice makes progress.</q>
</p>

68. <cite>

Used for the title of a creative work or source.

<p>
    I am reading
    <cite>Clean Code</cite>.
</p>

69. <code>

Represents computer code.

<p>
    Use <code>console.log()</code>
    to print something in JavaScript.
</p>

70. <pre>

Preserves whitespace and line breaks.

<pre>
Hello
    World
        HTML
</pre>

Often combined with <code>:

<pre><code>
const name = "Ali";

console.log(name);
</code></pre>

71. <kbd>

Represents keyboard input.

<p>
    Press <kbd>Ctrl</kbd> +
    <kbd>S</kbd> to save.
</p>

72. <samp>

Represents sample output from a program.

<p>
    Program output:
    <samp>Hello World</samp>
</p>

73. <var>

Represents a variable.

<p>
    The value of
    <var>x</var>
    is 10.
</p>

74. HTML Entities

Some characters have special meanings in HTML.

For example:

&lt;
&gt;
&amp;
&quot;
&apos;
&nbsp;

Meaning:

&lt;    <
&gt;    >
&amp;   &
&quot;  "
&apos;  '
&nbsp;  space

Example:

<p>
    5 &lt; 10
</p>

75. Common Symbols

&copy;
&reg;
&trade;
&euro;
&pound;
&yen;
&dollar;

Example:

<p>
    &copy; 2026 My Company
</p>

76. Character Encoding

Use UTF-8.

<meta charset="UTF-8">

This allows the page to correctly represent a large range of characters.

Example:

<p>Hello — مرحبا — नमस्ते — 你好</p>

77. Responsive Viewport

Important for mobile devices:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

Without the correct viewport configuration, responsive pages can behave poorly on mobile devices.


78. Meta Description

A description can be provided for search engines and link previews.

<meta
    name="description"
    content="Learn HTML from beginner to advanced level."
>

79. Favicon

You can add a favicon using:

<link
    rel="icon"
    href="favicon.ico"
>

For PNG:

<link
    rel="icon"
    type="image/png"
    href="favicon.png"
>

80. External CSS

Connect CSS using <link>.

<link
    rel="stylesheet"
    href="style.css"
>

Usually placed inside <head>.


81. Internal CSS

You can write CSS inside <style>.

<style>

    body {
        background: lightblue;
    }

    h1 {
        color: darkblue;
    }

</style>

82. Inline CSS

CSS can be added directly to an element.

<p style="color: red;">
    Red text
</p>

For larger projects, external CSS is generally easier to maintain.


83. JavaScript

JavaScript can be added with <script>.

<script>

    alert("Hello World!");

</script>

External JavaScript:

<script src="script.js"></script>

A common approach is:

<script src="script.js" defer></script>

84. data-* Attributes

Custom data attributes begin with data-.

<button
    data-user-id="123"
    data-role="admin"
>
    User
</button>

JavaScript can access these values.

const button = document.querySelector("button");

console.log(button.dataset.userId);
console.log(button.dataset.role);

85. Global HTML Attributes

Many HTML elements can use global attributes.

Common ones include:

id
class
title
style
hidden
lang
dir
data-*
tabindex
contenteditable
spellcheck

86. id

Identifies one specific element.

<h1 id="main-title">
    My Website
</h1>

An ID should normally be unique within the document.


87. class

Groups elements.

<p class="text">First paragraph.</p>

<p class="text">Second paragraph.</p>

One element can have multiple classes:

<div class="card featured">
    Product
</div>

88. title

Provides additional advisory information.

<button title="Save your document">
    Save
</button>

89. hidden

Hides an element.

<p hidden>
    This content is hidden.
</p>

90. contenteditable

Makes content editable by the user.

<p contenteditable="true">
    You can edit this text.
</p>

91. spellcheck

Controls spell checking.

<textarea spellcheck="true"></textarea>

92. dir

Controls text direction.

<p dir="ltr">
    Left to right text.
</p>

Right-to-left:

<p dir="rtl">
    هذا نص عربي
</p>

93. lang

Specifies the language.

<html lang="en">

For Urdu:

<html lang="ur">

For Arabic:

<html lang="ar">

94. <template>

Defines HTML that is not rendered immediately.

<template id="card-template">

    <article class="card">

        <h2>Product</h2>

        <p>Product description.</p>

    </article>

</template>

JavaScript can later clone the template.


95. <picture>

Provides different images for different conditions.

<picture>

    <source
        media="(min-width: 800px)"
        srcset="large.jpg"
    >

    <source
        media="(min-width: 400px)"
        srcset="medium.jpg"
    >

    <img
        src="small.jpg"
        alt="Landscape"
    >

</picture>

96. Responsive Images with srcset

<img
    src="small.jpg"
    srcset="
        small.jpg 400w,
        medium.jpg 800w,
        large.jpg 1200w
    "
    sizes="
        (max-width: 600px) 400px,
        (max-width: 1000px) 800px,
        1200px
    "
    alt="Landscape"
>

This allows the browser to choose an appropriate image resource.


97. Lazy Loading Images

<img
    src="photo.jpg"
    alt="A photo"
    loading="lazy"
>

Useful for images that are initially outside the viewport.


98. HTML Accessibility

Accessible HTML helps more people use your website.

Use semantic HTML

Prefer:

<button>Submit</button>

instead of:

<div onclick="submitForm()">
    Submit
</div>

Use labels

<label for="email">
    Email
</label>

<input
    id="email"
    type="email"
>

Use alt text

<img
    src="logo.png"
    alt="Company logo"
>

Use buttons for actions

<button type="button">
    Open Menu
</button>

Use links for navigation:

<a href="/about">
    About
</a>

99. ARIA Basics

ARIA can provide additional accessibility information when native HTML semantics are insufficient.

Example:

<button
    aria-label="Close menu"
>
    X
</button>

Another example:

<nav aria-label="Main navigation">

    <a href="/">Home</a>
    <a href="/about">About</a>

</nav>

Prefer native HTML semantics first.


100. HTML Form Validation

HTML provides built-in validation.

<form>

    <input
        type="email"
        required
    >

    <input
        type="password"
        minlength="8"
        required
    >

    <button type="submit">
        Register
    </button>

</form>

101. Pattern Validation

You can use pattern for certain text formats.

<input
    type="text"
    pattern="[A-Za-z]{3,20}"
    title="Use 3 to 20 letters."
    required
>

The browser can validate the input before submitting.


102. Autocomplete

<input
    type="email"
    name="email"
    autocomplete="email"
>

Other useful values include:

name
given-name
family-name
email
tel
street-address
postal-code
country
username
new-password
current-password

103. Form action and method

<form
    action="/submit"
    method="post"
>

GET

<form
    action="/search"
    method="get"
>

Often used for requests where the parameters can appear in the URL.

POST

<form
    action="/register"
    method="post"
>

Commonly used for submitting form data that should not be placed in the URL.


104. <datalist>

Provides suggestions for an input.

<label for="browser">
    Browser:
</label>

<input
    list="browsers"
    id="browser"
    name="browser"
>

<datalist id="browsers">

    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">

</datalist>

105. <output>

Represents the result of a calculation or user action.

<form
    oninput="result.value = Number(a.value) + Number(b.value)"
>

    <input
        id="a"
        name="a"
        type="number"
        value="10"
    >

    +

    <input
        id="b"
        name="b"
        type="number"
        value="20"
    >

    =

    <output name="result">
        30
    </output>

</form>

106. <canvas>

Canvas provides a drawing surface controlled by JavaScript.

<canvas
    id="myCanvas"
    width="400"
    height="200"
>
    Your browser does not support canvas.
</canvas>

<script>

    const canvas =
        document.getElementById("myCanvas");

    const ctx =
        canvas.getContext("2d");

    ctx.fillRect(50, 50, 100, 100);

</script>

107. SVG

SVG is used for scalable vector graphics.

Simple SVG:

<svg
    width="200"
    height="200"
    viewBox="0 0 200 200"
>

    <circle
        cx="100"
        cy="100"
        r="50"
        fill="blue"
    />

</svg>

108. HTML Links to Page Sections

Give an element an ID:

<h2 id="contact">
    Contact
</h2>

Then link to it:

<a href="#contact">
    Go to Contact
</a>

109. Navigation Menu

<nav>

    <a href="#home">Home</a>

    <a href="#about">About</a>

    <a href="#services">Services</a>

    <a href="#contact">Contact</a>

</nav>

<section id="home">
    <h2>Home</h2>
</section>

<section id="about">
    <h2>About</h2>
</section>

<section id="services">
    <h2>Services</h2>
</section>

<section id="contact">
    <h2>Contact</h2>
</section>

110. Complete Beginner HTML Project

Here is a complete beginner-friendly webpage.

<!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="My first HTML website"
    >

    <title>My First Website</title>

</head>


<body>

    <header>

        <h1>My First Website</h1>

        <nav>

            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#skills">Skills</a>
            <a href="#contact">Contact</a>

        </nav>

    </header>


    <main>

        <section id="home">

            <h2>Welcome</h2>

            <p>
                Hello! I am learning HTML.
            </p>

            <img
                src="profile.jpg"
                alt="Profile photo"
                width="200"
            >

        </section>


        <section id="about">

            <h2>About Me</h2>

            <p>
                I am learning web development
                and building my first website.
            </p>

        </section>


        <section id="skills">

            <h2>My Skills</h2>

            <ul>

                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>

            </ul>

        </section>


        <section id="contact">

            <h2>Contact Me</h2>

            <form>

                <label for="name">
                    Name:
                </label>

                <input
                    id="name"
                    type="text"
                    name="name"
                    required
                >

                <br><br>


                <label for="email">
                    Email:
                </label>

                <input
                    id="email"
                    type="email"
                    name="email"
                    required
                >

                <br><br>


                <label for="message">
                    Message:
                </label>

                <br>

                <textarea
                    id="message"
                    name="message"
                    rows="5"
                    cols="30"
                ></textarea>

                <br><br>


                <button type="submit">
                    Send Message
                </button>

            </form>

        </section>

    </main>


    <footer>

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

    </footer>

</body>

</html>

111. Intermediate HTML Project

<!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 personal portfolio website"
    >

    <title>My Portfolio</title>

    <link
        rel="stylesheet"
        href="style.css"
    >

</head>


<body>

    <header>

        <h1>Ali's Portfolio</h1>

        <nav aria-label="Main navigation">

            <a href="#about">
                About
            </a>

            <a href="#projects">
                Projects
            </a>

            <a href="#skills">
                Skills
            </a>

            <a href="#contact">
                Contact
            </a>

        </nav>

    </header>


    <main>

        <section id="about">

            <h2>About Me</h2>

            <p>
                I am a beginner web developer
                learning HTML, CSS and JavaScript.
            </p>

        </section>


        <section id="projects">

            <h2>Projects</h2>


            <article>

                <h3>Personal Website</h3>

                <p>
                    A personal portfolio website
                    created using HTML and CSS.
                </p>

                <a href="/projects/portfolio">
                    View Project
                </a>

            </article>


            <article>

                <h3>Todo App</h3>

                <p>
                    A simple todo application.
                </p>

                <a href="/projects/todo">
                    View Project
                </a>

            </article>

        </section>


        <section id="skills">

            <h2>Skills</h2>

            <table>

                <caption>
                    My Skills
                </caption>

                <thead>

                    <tr>
                        <th>Technology</th>
                        <th>Level</th>
                    </tr>

                </thead>

                <tbody>

                    <tr>
                        <td>HTML</td>
                        <td>Advanced</td>
                    </tr>

                    <tr>
                        <td>CSS</td>
                        <td>Intermediate</td>
                    </tr>

                    <tr>
                        <td>JavaScript</td>
                        <td>Beginner</td>
                    </tr>

                </tbody>

            </table>

        </section>


        <section id="contact">

            <h2>Contact</h2>

            <form>

                <fieldset>

                    <legend>
                        Contact Information
                    </legend>


                    <div>

                        <label for="name">
                            Name
                        </label>

                        <input
                            id="name"
                            name="name"
                            type="text"
                            autocomplete="name"
                            required
                        >

                    </div>


                    <br>


                    <div>

                        <label for="email">
                            Email
                        </label>

                        <input
                            id="email"
                            name="email"
                            type="email"
                            autocomplete="email"
                            required
                        >

                    </div>


                    <br>


                    <div>

                        <label for="message">
                            Message
                        </label>

                        <textarea
                            id="message"
                            name="message"
                            rows="6"
                            required
                        ></textarea>

                    </div>


                    <br>


                    <button type="submit">
                        Send
                    </button>

                </fieldset>

            </form>

        </section>

    </main>


    <footer>

        <p>
            &copy; 2026 Ali's Portfolio
        </p>

    </footer>

</body>

</html>

112. Advanced HTML Page Structure

A more complete document can look like this:

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- Character encoding -->
    <meta charset="UTF-8">

    <!-- Mobile responsiveness -->
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <!-- Search description -->
    <meta
        name="description"
        content="Advanced HTML example"
    >

    <!-- Page title -->
    <title>Advanced HTML</title>

    <!-- CSS -->
    <link
        rel="stylesheet"
        href="style.css"
    >

    <!-- JavaScript -->
    <script
        src="script.js"
        defer
    ></script>

</head>


<body>

    <header>

        <h1>Website Name</h1>

        <nav aria-label="Main navigation">

            <a href="/">Home</a>

            <a href="/about">
                About
            </a>

            <a href="/services">
                Services
            </a>

            <a href="/contact">
                Contact
            </a>

        </nav>

    </header>


    <main>

        <section>

            <h2>Featured Content</h2>

            <article>

                <header>

                    <h3>Article Title</h3>

                    <p>
                        Published:
                        <time datetime="2026-09-21">
                            September 21, 2026
                        </time>
                    </p>

                </header>


                <figure>

                    <img
                        src="article.jpg"
                        alt="Description of article image"
                        loading="lazy"
                    >

                    <figcaption>
                        Article image caption.
                    </figcaption>

                </figure>


                <p>
                    Article content goes here.
                </p>


                <footer>

                    <p>
                        Written by Ali.
                    </p>

                </footer>

            </article>

        </section>


        <aside>

            <h2>Related Content</h2>

            <ul>

                <li>
                    <a href="/article-1">
                        Article 1
                    </a>
                </li>

                <li>
                    <a href="/article-2">
                        Article 2
                    </a>
                </li>

            </ul>

        </aside>

    </main>


    <footer>

        <p>
            &copy; 2026 Website Name
        </p>

    </footer>

</body>

</html>

113. Important HTML Tags Cheat Sheet

TagPurpose
htmlRoot of HTML document
headDocument metadata
bodyVisible content
titleBrowser tab title
metaMetadata
linkExternal resources
styleInternal CSS
scriptJavaScript
h1–h6Headings
pParagraph
brLine break
hrThematic break
aHyperlink
imgImage
figureSelf-contained figure
figcaptionFigure caption
ulUnordered list
olOrdered list
liList item
dlDescription list
dtDescription term
ddDescription
divGeneric block container
spanGeneric inline container
tableTable
captionTable caption
theadTable header group
tbodyTable body
tfootTable footer group
trTable row
thTable header cell
tdTable data cell
formForm
labelForm label
inputForm input
textareaMultiline input
selectDropdown
optionDropdown option
buttonButton
fieldsetForm grouping
legendFieldset caption
datalistInput suggestions
outputCalculation/output
headerHeader content
navNavigation
mainMain content
sectionThematic section
articleIndependent content
asideRelated content
footerFooter content
audioAudio
videoVideo
sourceMedia source
trackMedia text tracks
iframeEmbedded page/content
detailsExpandable section
summaryDetails heading
dialogDialog
progressProgress indicator
meterMeasurement
timeDate/time
codeCode
prePreformatted text
kbdKeyboard input
abbrAbbreviation
addressContact information
blockquoteLong quotation
qShort quotation
citeWork/source title
markHighlight
strongStrong importance
emEmphasis
smallSmall print
delDeleted content
insInserted content
subSubscript
supSuperscript
pictureResponsive images
canvasScriptable drawing area
svgVector graphics
templateInert HTML template

114. Void Elements

Some HTML elements don’t have closing tags.

Common examples:

<img>

<br>

<hr>

<input>

<meta>

<link>

<source>

<track>

<area>

<base>

<embed>

<wbr>

Example:

<img
    src="photo.jpg"
    alt="Photo"
>

Do not write:

<img></img>

115. Block vs Inline Elements

HTML elements traditionally behave as block-level or inline elements, although CSS can change their display behavior.

Common block elements

<div>
<p>
<h1>
<h2>
<section>
<article>
<header>
<footer>
<main>
<ul>
<ol>
<table>
<form>

Common inline elements

<a>
<span>
<strong>
<em>
<code>
<small>
<mark>

Example:

<p>
    This is a
    <strong>very important</strong>
    sentence.
</p>

116. HTML File Structure

A common project structure:

my-website/
│
├── index.html
│
├── about.html
│
├── contact.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── images/
    ├── logo.png
    └── hero.jpg

117. Relative Paths

If the image is in the same folder:

<img src="photo.jpg" alt="Photo">

If it is inside an images folder:

<img src="images/photo.jpg" alt="Photo">

Go up one folder:

<img src="../photo.jpg" alt="Photo">

118. Absolute URLs

You can use a complete URL:

<img
    src="https://example.com/images/photo.jpg"
    alt="Photo"
>

For links:

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

119. Best HTML Practices

1. Use lowercase

Prefer:

<p>Hello</p>

instead of:

<P>Hello</P>

2. Quote attributes

Prefer:

<img src="photo.jpg" alt="Photo">

3. Use meaningful indentation

<section>

    <h2>About</h2>

    <p>
        About information.
    </p>

</section>

4. Use semantic elements

Prefer:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

when they match the meaning of the content.

5. Always provide useful image alt text

<img
    src="dog.jpg"
    alt="Golden retriever playing in a park"
>

6. Associate labels with form controls

<label for="email">
    Email
</label>

<input
    id="email"
    type="email"
>

7. Don’t use HTML for visual styling

Don’t write:

<font color="red">
    Hello
</font>

Use CSS instead:

<p class="red">
    Hello
</p>

120. HTML vs CSS vs JavaScript

Think of a website like a house:

HTML
 ↓
Structure
"The walls, rooms and doors"

CSS
 ↓
Appearance
"The colors, furniture and decoration"

JavaScript
 ↓
Behavior
"The switches, automatic doors and interactions"

Example:

HTML

<button id="button">
    Click Me
</button>

CSS

button {
    background: blue;
    color: white;
}

JavaScript

const button =
    document.getElementById("button");

button.addEventListener(
    "click",
    function () {
        alert("Button clicked!");
    }
);

121. HTML Learning Roadmap

Level 1 — Beginner

Learn:

HTML document structure
DOCTYPE
html
head
body
headings
paragraphs
links
images
lists
comments
attributes

Build:

Personal profile page
Simple blog page
Recipe page

Level 2 — Intermediate

Learn:

Tables
Forms
Inputs
Labels
Buttons
Semantic HTML
Audio
Video
Iframes
Meta tags
HTML entities
Accessibility basics

Build:

Registration form
Contact page
Portfolio
Blog layout
Product page

Level 3 — Advanced

Learn:

Responsive images
picture
srcset
Accessibility
ARIA
form validation
data attributes
template
dialog
canvas
SVG
SEO-related metadata
semantic document structure

Build:

Complete portfolio
Blog website
Dashboard structure
E-commerce product page
Documentation website

122. HTML Practice Project

Create a file named:

index.html

Then build this:

<!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="HTML practice project"
    >

    <title>HTML Practice Project</title>

</head>


<body>

    <header>

        <h1>My HTML Project</h1>

        <nav>

            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>

        </nav>

    </header>


    <main>

        <section id="home">

            <h2>Welcome</h2>

            <p>
                Welcome to my HTML practice project.
            </p>

        </section>


        <section id="about">

            <h2>About Me</h2>

            <figure>

                <img
                    src="profile.jpg"
                    alt="My profile picture"
                    width="200"
                >

                <figcaption>
                    My profile picture.
                </figcaption>

            </figure>

            <p>
                I am learning web development.
            </p>

        </section>


        <section id="services">

            <h2>My Services</h2>

            <ul>

                <li>Web Design</li>
                <li>HTML Development</li>
                <li>Frontend Development</li>

            </ul>

        </section>


        <section>

            <h2>My Skills</h2>

            <table>

                <caption>
                    Skills
                </caption>

                <thead>

                    <tr>
                        <th>Skill</th>
                        <th>Level</th>
                    </tr>

                </thead>

                <tbody>

                    <tr>
                        <td>HTML</td>
                        <td>Advanced</td>
                    </tr>

                    <tr>
                        <td>CSS</td>
                        <td>Intermediate</td>
                    </tr>

                    <tr>
                        <td>JavaScript</td>
                        <td>Beginner</td>
                    </tr>

                </tbody>

            </table>

        </section>


        <section id="contact">

            <h2>Contact Me</h2>

            <form>

                <fieldset>

                    <legend>
                        Contact Form
                    </legend>


                    <p>

                        <label for="name">
                            Name:
                        </label>

                        <input
                            id="name"
                            name="name"
                            type="text"
                            required
                        >

                    </p>


                    <p>

                        <label for="email">
                            Email:
                        </label>

                        <input
                            id="email"
                            name="email"
                            type="email"
                            required
                        >

                    </p>


                    <p>

                        <label for="message">
                            Message:
                        </label>

                        <br>

                        <textarea
                            id="message"
                            name="message"
                            rows="6"
                            cols="40"
                            required
                        ></textarea>

                    </p>


                    <button type="submit">
                        Send Message
                    </button>

                </fieldset>

            </form>

        </section>

    </main>


    <footer>

        <p>
            &copy; 2026 My HTML Project
        </p>

    </footer>

</body>

</html>

123. Final HTML Cheat Sheet

Document

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Text

<h1>Heading</h1>
<p>Paragraph</p>
<strong>Important</strong>
<em>Emphasis</em>
<mark>Highlight</mark>
<small>Small text</small>
<del>Deleted</del>
<ins>Inserted</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

Links & Media

<a href="...">Link</a>

<img
    src="..."
    alt="..."
>

<audio controls>
    <source src="audio.mp3">
</audio>

<video controls>
    <source src="video.mp4">
</video>

<iframe src="..."></iframe>

Lists

<ul>
    <li>Item</li>
</ul>

<ol>
    <li>Item</li>
</ol>

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
</dl>

Tables

<table>

    <caption>Table</caption>

    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data</td>
        </tr>
    </tbody>

</table>

Forms

<form>

    <label for="name">
        Name
    </label>

    <input
        id="name"
        type="text"
    >

    <textarea></textarea>

    <select>
        <option>Option</option>
    </select>

    <button type="submit">
        Submit
    </button>

</form>

Semantic HTML

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

124. The Most Important Things to Remember

If you are completely new to HTML, learn these first:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>My Website</title>

</head>

<body>

    <header>
        <h1>Website Title</h1>
    </header>

    <nav>
        <a href="/">Home</a>
    </nav>

    <main>

        <section>

            <h2>Section Title</h2>

            <p>
                This is a paragraph.
            </p>

            <img
                src="image.jpg"
                alt="Description"
            >

        </section>

    </main>

    <footer>
        <p>Copyright</p>
    </footer>

</body>

</html>

Then master:

1. Elements
2. Attributes
3. Headings
4. Paragraphs
5. Links
6. Images
7. Lists
8. Tables
9. Forms
10. Semantic HTML
11. Accessibility
12. Responsive images
13. Multimedia
14. Metadata
15. HTML + CSS
16. HTML + JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *