A COMPREHENSIVE GUIDE TO WEB STRUCTURE

HTML
Study Notes
A thorough reference covering HTML fundamentals,
from basic structure and essential tags to semantic
layouts, forms, tables, and media embedding. Designed
for beginners and as a quick-reference companion for
web developers.

[Link]

HTML STUD Y NOTES — 2025 ED ITION

Table of Contents

Chapter 1: Introduction to HTML 3

HTML Comment Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Chapter 2: Basic HTML Structure 4

The DOCTYPE Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Full Page Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

HTML Tag Anatomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

The DOM Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Chapter 3: Essential HTML Tags 6

Headings (h1 - h6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Paragraph, Anchor, and Image Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Anchor Attributes in Detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Text Formatting Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Line Breaks, Rules, and Special Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Chapter 4: Semantic Layout and Containers 8

Semantic HTML Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Div vs. Span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Block vs. Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Chapter 5: Lists, Tables, and Forms 11

Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Page 1
 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Chapter 6: Media and Embedding 13

iframe - Embedded Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Video Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Audio Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Page 2
Chapter 1: Introduction to HTML
HTML, which stands for HyperText Markup Language, is the standard markup language used to create and
structure content on the World Wide Web. Developed by Tim Berners-Lee in 1991, HTML has evolved through
multiple versions to become the backbone of every website you visit today. It provides a set of elements, enclosed
in tags, that tell the browser how to display text, images, links, and other forms of content. Without HTML, there
would be no structured way to present information on the internet.

At its core, HTML uses tags as building blocks. Each tag is enclosed in angle brackets, such as <p> for a
paragraph or <h1> for a heading. Most tags come in pairs: an opening tag and a closing tag (with a forward slash),
wrapping the content in between. Some tags are self-closing, like <br/> for a line break or <img/> for an
image. The browser reads these tags and renders the content accordingly, interpreting the markup to create the
visual layout the user sees.

When you open a website, the browser looks for a file called [Link] as the default homepage. This
convention is universally recognized by web servers: if a user navigates to a directory without specifying a file, the
server automatically serves [Link]. This makes it the natural entry point for any website project. It is
important to note that HTML is NOT case sensitive, meaning <HTML>, <Html>, and <html> are all treated
identically by the browser. However, the modern convention is to use lowercase tags for consistency and
readability.

HTML also supports comments, which are lines of text ignored by the browser. Comments are written as <!--
comment --> and are extremely useful for documenting your code, leaving notes for other developers, or
temporarily disabling blocks of HTML during development. Good use of comments is a hallmark of clean,
maintainable code, especially in large projects where multiple developers collaborate on the same codebase.

Learning HTML is the essential first step for anyone pursuing web development. It forms the structural
foundation upon which CSS (Cascading Style Sheets) and JavaScript are layered. While CSS handles the visual
presentation and JavaScript adds interactivity, HTML defines what content exists on the page and how it is
organized. Modern web development frameworks and libraries like React, Vue, and Angular all ultimately
produce HTML that the browser renders, making a solid understanding of HTML indispensable.

HTML Comment Syntax

<!-- This is an HTML comment -->
<!-- Multi-line
comments are also supported -->
<p>Visible content here</p>

Page 3
Chapter 2: Basic HTML Structure
Every HTML document follows a standard structure that provides the browser with essential information about
the document. This structure consists of a declaration, a root element, a head section for metadata, and a body
section for visible content. Understanding this skeleton is the first step in mastering HTML, as every webpage you
will ever build starts with these fundamental components.

The DOCTYPE Declaration

The <!DOCTYPE html> declaration must be the very first line of any HTML document. It tells the browser
that the document is an HTML5 document and instructs it to use standards mode for rendering. Without this
declaration, browsers may fall back to quirks mode, which can lead to inconsistent rendering across different
platforms. While the declaration looks like an HTML tag, it is technically not one -- it is a special instruction
directed at the browser parser.

Full Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the visible content.</p>
</body>
</html>

HTML Tag Anatomy

An HTML element is composed of several parts. The opening tag (e.g., <p>) marks the beginning of the
element. The content is the text or nested elements between the opening and closing tags. The closing tag (e.g.,
</p>) marks the end. Together, the opening tag, content, and closing tag form a complete element. Some
elements also have attributes in the opening tag, providing additional information such as the element identifier
(id), CSS class, or hyperlink destination (href).

Page 4
 Component Example Description

Opening Tag <p class="intro"> Marks the start; may include attributes

Content Hello, world! The text or nested elements displayed

Closing Tag </p> Marks the end with a forward slash

Element Entire structure above Opening tag + content + closing tag

Attribute class="intro" Provides additional info in the opening tag

Table 1: Anatomy of an HTML Element

The DOM Tree

When a browser loads an HTML document, it parses the markup and constructs a Document Object Model
(DOM) tree. The DOM is a hierarchical representation of the document where each HTML tag becomes a node.
The <html> element is the root node, <head> and <body> are its children, and every nested element branches
further down. Understanding the DOM tree is essential for JavaScript manipulation, CSS styling, and web
accessibility.

Page 5
 Figure 1: The HTML Document Object Model (DOM) Tree

Chapter 3: Essential HTML Tags

Headings (h1 - h6)

HTML provides six levels of headings, from <h1> (the largest and most important) to <h6> (the smallest).
Headings create a clear visual hierarchy on the page, helping both users and search engines understand the
structure and importance of content. Best practices recommend using only one <h1> per page (typically the main
title) and using subsequent heading levels in logical order without skipping levels.

Tag Font Size Typical Usage

<h1> 2em (32px default) Main page title, used once per page

<h2> 1.5em (24px) Major section headings

<h3> 1.17em (19px) Subsection headings

<h4> 1em (16px) Minor sub-sections

<h5> 0.83em (13px) Small headings, sidebars

<h6> 0.67em (11px) Smallest heading, captions

Table 2: HTML Heading Hierarchy

Paragraph, Anchor, and Image Tags

The <p> tag defines a paragraph of text. Browsers automatically add vertical spacing (margin) before and after
each paragraph to visually separate blocks of text. The <a> (anchor) tag creates hyperlinks that allow users to
navigate between pages. Its most important attribute is href, which specifies the destination URL. The target
attribute controls how the link opens: target="_blank" opens the link in a new tab, while the default
behavior opens it in the same window.

The <img> tag embeds images into a webpage. It is a self-closing tag that requires at minimum a src attribute
(the path to the image file) and an alt attribute (alternative text describing the image for accessibility and SEO).
Optional width and height attributes control the display dimensions. Providing alt text is not only a best practice
for accessibility but also ensures that screen readers can describe the image to visually impaired users.

<!-- Paragraph -->

Page 6
 <p>This is a paragraph of text.</p>
<!-- Anchor with target -->
<a href="[Link] target="_blank">Visit Example</a>
<!-- Image with alt, width, height -->
<img src="[Link]" alt="A beautiful landscape" width="400" height="300">

Anchor Attributes in Detail

The anchor tag supports several important attributes beyond href and target. The title attribute provides tooltip
text when the user hovers over the link. The download attribute hints that the linked resource should be
downloaded rather than navigated to. The rel attribute defines the relationship between the current document and
the linked document, with values like "noopener" (for security when using target="_blank") and "nofollow" (to
instruct search engines not to follow the link). Understanding these attributes helps create links that are both
user-friendly and secure.

Attribute Value Example Purpose

href "[Link] URL or path the link points to

target "_blank" Opens link in a new tab or window

title "Click for details" Tooltip shown on hover

download "[Link]" Prompts download instead of navigation

rel "noopener noreferrer" Security and SEO relationship hint

Table 2a: Anchor Tag Attributes Reference

Text Formatting Tags

HTML offers several tags for formatting text within paragraphs. The <b> tag makes text bold, <i> makes it
italic, and <u> adds an underline. The <big> and <small> tags respectively increase or decrease the font size
relative to the surrounding text. These inline tags are used to add emphasis or visual distinction to specific words
or phrases within a larger block of text, and they can be nested for combined effects such as bold italic.

<p><b>Bold text</b> for strong emphasis.</p>

<p><i>Italic text</i> for subtle emphasis.</p>
<p><u>Underlined text</u> for annotations.</p>
<p><big>Bigger text</big> and <small>smaller text</small>.</p>
<p><b><i>Bold and italic combined</i></b>.</p>

Page 7
Line Breaks, Rules, and Special Text
The <br> tag inserts a line break within a paragraph without starting a new paragraph block. It is a self-closing
tag and is particularly useful for formatting addresses, poems, or any content where line breaks are significant.
The <hr> (horizontal rule) tag draws a thematic horizontal line across the page, often used to separate sections of
content visually. It is also self-closing.

For scientific and mathematical content, HTML provides <sub> (subscript) and <sup> (superscript) tags. These
are essential for writing chemical formulas like H2O or mathematical expressions like E=mc2. The <pre>
(preformatted) tag displays text exactly as written in the HTML source, preserving whitespace and line breaks. It
is commonly used for displaying code snippets, ASCII art, or any content where the formatting must remain
untouched.

<p>Line 1<br>Line 2<br>Line 3</p>

<hr>
<p>H₂O - Water (subscript)</p>
<p>x² + y² = z² (superscript)</p>
<pre>
This text preserves
spaces and
line breaks.
</pre>

Chapter 4: Semantic Layout and Containers

Semantic HTML Tags

Semantic HTML tags convey meaning about the type of content they contain, making the document structure
more readable for both developers and machines (search engines, screen readers). Unlike generic <div>
containers, semantic tags like <header>, <nav>, <main>, <section>, <article>, <aside>, and
<footer> clearly describe the role of each part of the page. Using semantic tags improves accessibility, SEO
ranking, and code maintainability. A well-structured semantic document is easier to style with CSS and
manipulate with JavaScript.

Page 8
 Figure 2: Semantic HTML Layout Structure

Div vs. Span

The <div> and <span> tags are both generic container elements, but they behave very differently. The <div>
is a block-level element, meaning it starts on a new line and takes up the full available width of its parent
container. It is commonly used to group large sections of content and apply CSS styles to the entire block. In
contrast, the <span> is an inline element, meaning it flows within the surrounding text without creating a new
line. It is ideal for styling or manipulating a small portion of text or inline content.

Page 9
 Figure 3: Block vs. Inline Element Comparison

Block vs. Inline Elements

Understanding the difference between block-level and inline elements is fundamental to controlling layout in
HTML. Block elements create their own line and can contain both block and inline elements. Inline elements sit
within the flow of text and can only contain other inline elements or text. This distinction affects everything from
spacing and width behavior to how CSS properties like margin, padding, and text-align apply.

Property Block Elements Inline Elements

Starts new line Yes No

Takes full width Yes (by default) Only as wide as content

Can set width/height Yes No (ignores width/height)

Can contain other blocks Yes No

div, p, h1-h6, ul, ol, li, table, form, span, a, strong, em, img, b, i, u, sub,
Common tags
section, header sup, br

Table 3: Block vs. Inline Element Comparison

Page 10
Chapter 5: Lists, Tables, and Forms

Lists
HTML supports two primary types of lists. Unordered lists (<ul>) display items with bullet points and are used
when the order of items does not matter. Ordered lists (<ol>) display items with numbers and are used when the
sequence is important, such as step-by-step instructions or rankings. Both list types use <li> (list item) tags for
each entry. Lists can also be nested to create multi-level structures, which is common for navigation menus and
table of contents.

<!-- Unordered List -->

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered List -->
<ol>
<li>Learn HTML basics</li>
<li>Master CSS styling</li>
<li>Practice JavaScript</li>
</ol>

Tables
HTML tables are created using the <table> element. Each row is defined with <tr> (table row), and each cell
can be either <td> (table data, a standard cell) or <th> (table header, used for column or row headings). The
<thead>, <tbody>, and <tfoot> elements group the header, body, and footer sections of a table
respectively, improving semantics and enabling independent scrolling. The <caption> element provides a title
for the table. The colspan attribute allows a cell to span multiple columns.

<table>
<caption>Student Grades</caption>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>

Page 11
 <tbody>
<tr>
<td>Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td colspan="2">N/A (on leave)</td>
</tr>
</tbody>
</table>

Forms
HTML forms are the primary mechanism for collecting user input on the web. The <form> tag wraps all form
controls and defines how the data is submitted using the action attribute (the URL that processes the data) and the
method attribute (GET or POST). The most common input element is <input>, which can take many forms
depending on its type attribute: text fields, radio buttons, checkboxes, password fields, and more. Each input
should have a corresponding <label> element for accessibility.

The <textarea> element provides a multi-line text input, ideal for comments or messages. The <select>
element creates a dropdown menu, with each option defined by a <option> tag. Additionally, HTML elements
can have class and id attributes: the class attribute is used to group elements for CSS styling (multiple elements
can share a class), while the id attribute uniquely identifies a single element (each id must be unique on the page).
Both are fundamental for CSS and JavaScript targeting.

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

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="40"></textarea>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
<button type="submit">Submit</button>

Page 12
 </form>

Input Type Syntax Description

Text <input type="text"> Single-line text input

Radio <input type="radio"> Single selection from a group

Checkbox <input type="checkbox"> Multiple selections possible

Password <input type="password"> Hidden text input

Submit <input type="submit"> Submits the form

Email <input type="email"> Validates email format

Table 4: Common HTML Input Types

Chapter 6: Media and Embedding

iframe - Embedded Content

The <iframe> (inline frame) element embeds another HTML page within the current page, effectively creating
a "website within a website." The src attribute specifies the URL of the page to embed, while optional attributes
like width, height, and frameborder control the dimensions and appearance. Iframes are commonly used to
embed YouTube videos, Google Maps, third-party widgets, and advertisements. However, they should be used
judiciously, as each iframe loads a separate document and can impact page performance and security (via
clickjacking attacks if not properly sandboxed).

<!-- Embed an external page -->

<iframe src="[Link]
width="600" height="400"
frameborder="0"
title="Embedded Example">
</iframe>

Video Element
The <video> tag allows you to embed video content directly into a webpage without requiring third-party
plugins like Flash. Key attributes include controls (displays play/pause buttons), height and width (set the player
dimensions), loop (repeats the video automatically), and autoplay (starts playing without user interaction). The
<source> element nested inside the video tag allows you to specify multiple video formats, ensuring

Page 13
cross-browser compatibility. Modern browsers support MP4 (H.264), WebM (VP8/VP9), and Ogg (Theora)
formats.

The HTML5 media elements (video and audio) represent a major advancement over the old approach of relying
on browser plugins. Before HTML5, embedding video required the <embed> or <object> tags with Flash,
which had significant security vulnerabilities and was not supported on mobile devices. The native <video> and
<audio> tags solved these problems by providing a standardized, plugin-free way to deliver media content. This
shift was instrumental in making the web a viable platform for rich media experiences across all devices, from
desktop computers to smartphones and tablets.

<video controls width="640" height="360" loop autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>

Attribute Value Effect

controls No value needed Shows play/pause/seek controls

width Number (pixels) Sets the video player width

height Number (pixels) Sets the video player height

loop No value needed Repeats the video when it ends

autoplay No value needed Starts playing automatically

muted No value needed Silences the audio by default

poster URL Image shown before playback starts

Table 5: Video Element Attributes

Audio Element
The <audio> tag works similarly to the video tag but is specifically designed for sound files. It shares many of
the same attributes such as controls, loop, autoplay, and muted. The <source> child element is used to
provide multiple audio formats for broader browser support. Common audio formats include MP3, OGG, and
WAV. The audio element is widely used for music players, podcast players, and notification sounds within web
applications.

<audio controls loop>

<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">

Page 14
Your browser does not support the audio tag.
</audio>

Page 15