HTML — Detailed Notes

Clean Study Notes • Simple Explanations • Diagrams • Examples • Practice

HTML stands for HyperText Markup Language. It is the standard markup language used to create the structure of web pages.

How a Web Page Works

HTML
Structure

→

CSS
Design

→

JavaScript
Behaviour

→

Web Page

Remember: HTML is not a programming language. It is a markup language because we use tags to describe the structure and meaning of content.

Basic Uses of HTML

Create headings, paragraphs and lists.
Add images, audio, video and hyperlinks.
Create forms and collect user input.
Build the semantic structure of websites.
Provide content that CSS can style and JavaScript can make interactive.

1. Basic Structure of an HTML Document

Every normal HTML document starts with a document type declaration followed by the html, head and body sections.

<!DOCTYPE html>

↓

<html>

↓

<head> → title, meta, CSS links

↓

<body> → visible page content

<!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 my first web page.</p>
</body>
</html>

Important Parts

Part	Purpose
`<!DOCTYPE html>`	Tells the browser to use modern HTML parsing.
`<html>`	Root element of the document.
`<head>`	Contains metadata, title, stylesheets and other resources.
`<body>`	Contains content displayed on the page.
`<title>`	Sets the browser tab title.

2. HTML Elements, Tags and Attributes

HTML Tag

A tag is written inside angle brackets. Example: <p>.

HTML Element

An element normally contains an opening tag, content and a closing tag.

<p>

→

Hello World

→

</p>

Opening tag + Content + Closing tag = Element

Attributes

Attributes provide extra information about an element. They are usually written inside the opening tag.

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

<img src="photo.jpg" alt="A mountain">

Attribute	Common use
`href`	Specifies a link destination.
`src`	Specifies a resource such as an image.
`alt`	Alternative text for an image.
`id`	Unique identifier for an element.
`class`	Groups elements for CSS/JavaScript.

Common mistake: Always quote attribute values when practical, e.g. class="card".

3. Headings, Paragraphs and Text Formatting

Headings

HTML provides six heading levels: <h1> through <h6>. The number represents the heading level, not simply the visual size.

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Small Heading</h4>
<h5>Smaller Heading</h5>
<h6>Lowest Heading Level</h6>

Paragraphs and Line Breaks

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

<p>Line one<br>Line two</p>

Common Text Elements

Element	Meaning / use
`<strong>`	Strong importance.
`<em>`	Emphasis.
`<mark>`	Highlighted text.
`<small>`	Side comments or small print.
`<del>`	Deleted text.
`<ins>`	Inserted text.
`<sub>`	Subscript.
`<sup>`	Superscript.

<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup> + y<sup>2</sup></p>
<p><strong>Important!</strong> Read this carefully.</p>

4. Links and Images

Hyperlinks

<a href="https://www.google.com">Open Google</a>

<a href="about.html">About Us</a>

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

User clicks link

→

Browser reads href

→

Requested resource opens

Images

<img src="images/logo.png"
     alt="SLRJ Digital logo"
     width="300">

Why is alt important? It provides alternative text when the image cannot be displayed and helps assistive technologies describe meaningful images.

Tip: Use descriptive link text such as “Download HTML Notes” rather than “Click here”.

5. Lists in HTML

Unordered List

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

Ordered List

<ol>
  <li>Open the editor</li>
  <li>Create index.html</li>
  <li>Write HTML</li>
  <li>Open it in a browser</li>
</ol>

Description List

<dl>
  <dt>HTML</dt>
  <dd>Markup language for web structure.</dd>

  <dt>CSS</dt>
  <dd>Style sheet language for presentation.</dd>
</dl>

UL → • Item

OL → 1. Item

DL → Term + Description

6. Tables

Tables are used for tabular data such as marks, schedules and product information. Do not use tables simply to position page elements.

<table>
  <caption>Student Marks</caption>

  <thead>
    <tr>
      <th>Name</th>
      <th>HTML</th>
      <th>CSS</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Shahid</td>
      <td>90</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

<table>

↓

Remember: <th> represents a header cell, while <td> represents a normal data cell.

7. Forms

Forms allow users to enter and submit information.

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

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

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

  <label for="course">Course:</label>
  <select id="course" name="course">
    <option>HTML</option>
    <option>CSS</option>
  </select>

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

Common Input Types

Type	Purpose
text	Single-line text.
email	Email address input.
password	Password input.
number	Numeric input.
date	Date selection.
radio	Select one option from a group.
checkbox	Select zero or more options.
file	Select a file.

Good practice: Connect every form control to a meaningful <label>.

8. Semantic HTML

Semantic elements describe the meaning and role of their content. They make a page easier for people, search engines and assistive technologies to understand.

↓

<nav>

<aside>

↓

<header>
  <h1>My Blog</h1>
</header>

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

<main>
  <article>
    <h2>HTML Basics</h2>
    <p>HTML creates page structure...</p>
  </article>
</main>

<footer>Copyright 2026</footer>

Element	Typical role
header	Introductory content or site header.
nav	Navigation links.
main	Main unique content of the page.
section	Thematic grouping of content.
article	Self-contained content.
aside	Related or secondary content.
footer	Footer information.

9. Multimedia

Audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Video

<video controls width="640">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Embedding another page

<iframe
  src="https://example.com"
  title="Example page">
</iframe>

Security note: Only embed content from sources you trust and understand. Not every website permits itself to be displayed inside an iframe.

10. Div, Span, Classes and IDs

div

<div> is a generic block-level container. It is useful when no more meaningful semantic element fits.

span

<span> is a generic inline container.

<div class="card">
  <h2>HTML Notes</h2>
  <p>Learn <span class="highlight">HTML</span> step by step.</p>
</div>

Class vs ID

class	id
Can be reused on many elements.	Should identify one unique element in a document.
Commonly used for styling groups.	Useful for unique elements and fragment links.
CSS selector: `.card`	CSS selector: `#header`

<h2 id="html">HTML</h2>

<div class="note">Important note</div>
<div class="note">Another note</div>

11. HTML Entities and Comments

Comments

<!-- This is an HTML comment.
     It is not displayed on the page. -->

Entities

Some characters have special meaning in HTML, so entities can be used to represent them safely.

Entity	Displayed character
`<`	<
`>`	>
`&`	&
`©`	©
` `	Non-breaking space

Example: To display the literal text <h1> on a webpage, write <h1>.

12. Accessibility and Good HTML Practices

Use meaningful headings in a logical structure.
Add useful alt text to meaningful images.
Use labels for form controls.
Use buttons for actions and links for navigation.
Prefer semantic HTML over unnecessary div elements.
Keep link text descriptive.
Set the document language with lang="en" when appropriate.
Make sure interactive controls can be used with a keyboard.

Example: Better HTML

<article>
  <h2>HTML Accessibility</h2>

  <img src="keyboard.jpg"
       alt="Person using a keyboard">

  <p>Accessible websites can be used by more people.</p>

  <a href="accessibility.html">
    Read accessibility guide
  </a>
</article>

13. Mini Project — Student Profile Page

Use the following example to combine headings, image, links, lists, semantic elements and a simple form.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Student Profile</title>
</head>

<body>

  <header>
    <h1>My Student Profile</h1>
    <p>Learning web development step by step.</p>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <img src="profile.jpg"
           alt="Student profile photo"
           width="180">
      <p>I am learning HTML, CSS and JavaScript.</p>
    </section>

    <section>
      <h2>Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section>
      <h2>Contact</h2>
      <form>
        <label for="email">Email</label>
        <input type="email" id="email">
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2026 Student Profile</p>
  </footer>

</body>
</html>

Project Structure

student-profile/

↓

index.html

profile.jpg

14. Quick Revision Sheet

Topic	Remember
HTML	Structures web content.
Element	Opening tag + content + closing tag, where applicable.
Attribute	Provides additional information to an element.
Heading	`h1` to `h6`.
Paragraph	`p`.
Link	`a` with `href`.
Image	`img` with `src` and useful `alt`.
List	`ul`, `ol`, `li`.
Table	`table`, `tr`, `th`, `td`.
Form	`form`, `label`, `input`, `button`.
Semantic HTML	`header`, `nav`, `main`, `section`, `article`, `footer`.

Practice Questions

What is HTML and why is it called a markup language?
Explain the difference between an HTML tag and an element.
What are attributes? Give three examples.
Write the basic structure of an HTML document.
Differentiate between ordered and unordered lists.
What is the purpose of the alt attribute?
Explain semantic HTML with examples.
Create a form containing name, email and a submit button.
Create a table containing three students and their marks.
Build a simple student profile page using semantic HTML.

Final memory trick: HTML = Structure → CSS = Style → JavaScript = Behaviour.

HTML — Detailed Notes

Clean Study Notes • Simple Explanations • Diagrams • Examples • Practice

HTML stands for HyperText Markup Language. It is the standard markup language used to create the structure of web pages.

How a Web Page Works

HTML
Structure

→

CSS
Design

→

JavaScript
Behaviour

→

Web Page

Remember: HTML is not a programming language. It is a markup language because we use tags to describe the structure and meaning of content.

Basic Uses of HTML

Create headings, paragraphs and lists.
Add images, audio, video and hyperlinks.
Create forms and collect user input.
Build the semantic structure of websites.
Provide content that CSS can style and JavaScript can make interactive.

1. Basic Structure of an HTML Document

Every normal HTML document starts with a document type declaration followed by the html, head and body sections.

<!DOCTYPE html>

↓

<html>

↓

<head> → title, meta, CSS links

↓

<body> → visible page content

<!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 my first web page.</p>
</body>
</html>

Important Parts

Part	Purpose
`<!DOCTYPE html>`	Tells the browser to use modern HTML parsing.
`<html>`	Root element of the document.
`<head>`	Contains metadata, title, stylesheets and other resources.
`<body>`	Contains content displayed on the page.
`<title>`	Sets the browser tab title.

2. HTML Elements, Tags and Attributes

HTML Tag

A tag is written inside angle brackets. Example: <p>.

HTML Element

An element normally contains an opening tag, content and a closing tag.

<p>

→

Hello World

→

</p>

Opening tag + Content + Closing tag = Element

Attributes

Attributes provide extra information about an element. They are usually written inside the opening tag.

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

<img src="photo.jpg" alt="A mountain">

Attribute	Common use
`href`	Specifies a link destination.
`src`	Specifies a resource such as an image.
`alt`	Alternative text for an image.
`id`	Unique identifier for an element.
`class`	Groups elements for CSS/JavaScript.

Common mistake: Always quote attribute values when practical, e.g. class="card".

3. Headings, Paragraphs and Text Formatting

Headings

HTML provides six heading levels: <h1> through <h6>. The number represents the heading level, not simply the visual size.

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Small Heading</h4>
<h5>Smaller Heading</h5>
<h6>Lowest Heading Level</h6>

Paragraphs and Line Breaks

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

<p>Line one<br>Line two</p>

Common Text Elements

Element	Meaning / use
`<strong>`	Strong importance.
`<em>`	Emphasis.
`<mark>`	Highlighted text.
`<small>`	Side comments or small print.
`<del>`	Deleted text.
`<ins>`	Inserted text.
`<sub>`	Subscript.
`<sup>`	Superscript.

<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup> + y<sup>2</sup></p>
<p><strong>Important!</strong> Read this carefully.</p>

4. Links and Images

Hyperlinks

<a href="https://www.google.com">Open Google</a>

<a href="about.html">About Us</a>

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

User clicks link

→

Browser reads href

→

Requested resource opens

Images

<img src="images/logo.png"
     alt="SLRJ Digital logo"
     width="300">

Why is alt important? It provides alternative text when the image cannot be displayed and helps assistive technologies describe meaningful images.

Tip: Use descriptive link text such as “Download HTML Notes” rather than “Click here”.

5. Lists in HTML

Unordered List

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

Ordered List

<ol>
  <li>Open the editor</li>
  <li>Create index.html</li>
  <li>Write HTML</li>
  <li>Open it in a browser</li>
</ol>

Description List

<dl>
  <dt>HTML</dt>
  <dd>Markup language for web structure.</dd>

  <dt>CSS</dt>
  <dd>Style sheet language for presentation.</dd>
</dl>

UL → • Item

OL → 1. Item

DL → Term + Description

6. Tables

Tables are used for tabular data such as marks, schedules and product information. Do not use tables simply to position page elements.

<table>
  <caption>Student Marks</caption>

  <thead>
    <tr>
      <th>Name</th>
      <th>HTML</th>
      <th>CSS</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Shahid</td>
      <td>90</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

<table>

↓

Remember: <th> represents a header cell, while <td> represents a normal data cell.

7. Forms

Forms allow users to enter and submit information.

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

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

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

  <label for="course">Course:</label>
  <select id="course" name="course">
    <option>HTML</option>
    <option>CSS</option>
  </select>

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

Common Input Types

Type	Purpose
text	Single-line text.
email	Email address input.
password	Password input.
number	Numeric input.
date	Date selection.
radio	Select one option from a group.
checkbox	Select zero or more options.
file	Select a file.

Good practice: Connect every form control to a meaningful <label>.

8. Semantic HTML

Semantic elements describe the meaning and role of their content. They make a page easier for people, search engines and assistive technologies to understand.

↓

<nav>

<aside>

↓

<header>
  <h1>My Blog</h1>
</header>

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

<main>
  <article>
    <h2>HTML Basics</h2>
    <p>HTML creates page structure...</p>
  </article>
</main>

<footer>Copyright 2026</footer>

Element	Typical role
header	Introductory content or site header.
nav	Navigation links.
main	Main unique content of the page.
section	Thematic grouping of content.
article	Self-contained content.
aside	Related or secondary content.
footer	Footer information.

9. Multimedia

Audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Video

<video controls width="640">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Embedding another page

<iframe
  src="https://example.com"
  title="Example page">
</iframe>

Security note: Only embed content from sources you trust and understand. Not every website permits itself to be displayed inside an iframe.

10. Div, Span, Classes and IDs

div

<div> is a generic block-level container. It is useful when no more meaningful semantic element fits.

span

<span> is a generic inline container.

<div class="card">
  <h2>HTML Notes</h2>
  <p>Learn <span class="highlight">HTML</span> step by step.</p>
</div>

Class vs ID

class	id
Can be reused on many elements.	Should identify one unique element in a document.
Commonly used for styling groups.	Useful for unique elements and fragment links.
CSS selector: `.card`	CSS selector: `#header`

<h2 id="html">HTML</h2>

<div class="note">Important note</div>
<div class="note">Another note</div>

11. HTML Entities and Comments

Comments

<!-- This is an HTML comment.
     It is not displayed on the page. -->

Entities

Some characters have special meaning in HTML, so entities can be used to represent them safely.

Entity	Displayed character
`<`	<
`>`	>
`&`	&
`©`	©
` `	Non-breaking space

Example: To display the literal text <h1> on a webpage, write <h1>.

12. Accessibility and Good HTML Practices

Use meaningful headings in a logical structure.
Add useful alt text to meaningful images.
Use labels for form controls.
Use buttons for actions and links for navigation.
Prefer semantic HTML over unnecessary div elements.
Keep link text descriptive.
Set the document language with lang="en" when appropriate.
Make sure interactive controls can be used with a keyboard.

Example: Better HTML

<article>
  <h2>HTML Accessibility</h2>

  <img src="keyboard.jpg"
       alt="Person using a keyboard">

  <p>Accessible websites can be used by more people.</p>

  <a href="accessibility.html">
    Read accessibility guide
  </a>
</article>

13. Mini Project — Student Profile Page

Use the following example to combine headings, image, links, lists, semantic elements and a simple form.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Student Profile</title>
</head>

<body>

  <header>
    <h1>My Student Profile</h1>
    <p>Learning web development step by step.</p>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <img src="profile.jpg"
           alt="Student profile photo"
           width="180">
      <p>I am learning HTML, CSS and JavaScript.</p>
    </section>

    <section>
      <h2>Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section>
      <h2>Contact</h2>
      <form>
        <label for="email">Email</label>
        <input type="email" id="email">
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2026 Student Profile</p>
  </footer>

</body>
</html>

Project Structure

student-profile/

↓

index.html

profile.jpg

14. Quick Revision Sheet

Topic	Remember
HTML	Structures web content.
Element	Opening tag + content + closing tag, where applicable.
Attribute	Provides additional information to an element.
Heading	`h1` to `h6`.
Paragraph	`p`.
Link	`a` with `href`.
Image	`img` with `src` and useful `alt`.
List	`ul`, `ol`, `li`.
Table	`table`, `tr`, `th`, `td`.
Form	`form`, `label`, `input`, `button`.
Semantic HTML	`header`, `nav`, `main`, `section`, `article`, `footer`.

Practice Questions

What is HTML and why is it called a markup language?
Explain the difference between an HTML tag and an element.
What are attributes? Give three examples.
Write the basic structure of an HTML document.
Differentiate between ordered and unordered lists.
What is the purpose of the alt attribute?
Explain semantic HTML with examples.
Create a form containing name, email and a submit button.
Create a table containing three students and their marks.
Build a simple student profile page using semantic HTML.

Final memory trick: HTML = Structure → CSS = Style → JavaScript = Behaviour.

HTML — Detailed Notes

How a Web Page Works

Basic Uses of HTML

1. Basic Structure of an HTML Document

Important Parts

2. HTML Elements, Tags and Attributes

HTML Tag

HTML Element

Attributes

3. Headings, Paragraphs and Text Formatting

Headings

Paragraphs and Line Breaks

Common Text Elements

4. Links and Images

Hyperlinks

Images

5. Lists in HTML

Unordered List

Ordered List

Description List

6. Tables

7. Forms

Common Input Types

8. Semantic HTML

9. Multimedia

Audio

Video

Embedding another page

10. Div, Span, Classes and IDs

div

span

Class vs ID

11. HTML Entities and Comments

Comments

Entities

12. Accessibility and Good HTML Practices

Example: Better HTML

13. Mini Project — Student Profile Page

Project Structure

14. Quick Revision Sheet

Practice Questions

Need modern high-performance architecture built for your business?

HTML — Detailed Notes

How a Web Page Works

Basic Uses of HTML

1. Basic Structure of an HTML Document

Important Parts

2. HTML Elements, Tags and Attributes

HTML Tag

HTML Element

Attributes

3. Headings, Paragraphs and Text Formatting

Headings

Paragraphs and Line Breaks

Common Text Elements

4. Links and Images

Hyperlinks

Images

5. Lists in HTML

Unordered List

Ordered List

Description List

6. Tables

7. Forms

Common Input Types

8. Semantic HTML

9. Multimedia

Audio

Video

Embedding another page

10. Div, Span, Classes and IDs

div

span

Class vs ID

11. HTML Entities and Comments

Comments

Entities

12. Accessibility and Good HTML Practices

Example: Better HTML

13. Mini Project — Student Profile Page