Notes - HTML

Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It's a markup language used to create the structure of web content. It builds the skeleton of web pages.

Why is HTML used?

To structure web pages and display text, images, videos, and links.
To define layout and content in a way that browsers can understand.
It is the foundation of any website, along with CSS (styling) and JavaScript (interactivity).

HTML element

An HTML element defines the content and structure of a webpage.

It usually consists of:

An opening tag.
Some content.
A closing tag.
<p> Content </p>
Here <p> is the opening tag, </p> is the closing tag, and the entire structure is an HTML element.

Some elements don't have closing tag or content, they are called empty tag or empty element or self-closing element or void element. E.g. <br>, <hr>, <img>, <input> etc.

Attributes

Attributes provide extra information about an HTML element. It's used to add additional details, behavior, or styling.

Added inside the opening tag.
Multiple attributes can be used in an element.
Most attributes are written as name="value" pairs.
E.g. <img src="image.jpg">

Common uses:

href for links.
src for images.
alt for image descriptions.
id and class for styling or scripting.

***

HTML is case insensitive.
Recommended to use small letters.
It ignores extra spaces & new lines except pre tag (<pre></pre>).

HTML Boilerplate

An HTML boilerplate or template is the basic starting template of an HTML document. It includes the essential code needed to make a webpage work properly in any browser.

Here:

<!DOCTYPE html> Tells the browser this is an HTML5 document.
<html lang="en"> Starts the HTML document; lang="en" tells the browser and search engines that the language of the content is English.
<head></head> Contains information about the page (not visible on the page).
<meta charset="UTF-8" /> Sets the character encoding (supports most characters).
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> Makes the page responsive on mobile devices.
<title>My Web Page</title> Sets the page title (shown in the browser tab).
<body></body> Contains the visible content of the webpage.

HTML Stractural Tags

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <p> are called structural tags.

They are also known as:

Text-level semantic tags.
Content structure tags.
Block-level tags (because they create blocks of content).

How they work?

<h1> Main title of the page </h1>.
<h2> Subheading </h2>.
<h3> Smaller section heading </h3>.
<h6> Smallest heading </h6>.
<p> Text content or a paragraph block </p>.

Why they matter?

Help browsers and search engines understand the structure of your content.
Improve readability, SEO, and accessibility.

Text Formatting Tags

These tags are used in HTML to style, emphasize, or modify the appearance of text on a webpage.

How they work

<b> Bold text (Visual only).
<strong> Bold text (Strong importance).
<i> Italic text (Visual only).
<em> Italic text (Emphasized).
<u> Underlined text.
<mark> Highighted text.
<small> Smaller text.
<del> Deleted (strikethrough) text.
<ins> Inserted (underlined) text.
<sub> Subscript (e.g., H₂O).
<sup> Superscript (e.g., x²).
<code> Monospaced text for code.
<pre> Preformatted text (preserves spacing).

Embedded Content Tags

<img>, <audio>, <video>, <iframe></iframe> etc.

They are also known as Multimedia tags.
These tags are used to embed media or link to external content in an HTML page.
They are essential for making websites interactive and visually rich.

How they work?

<img src="" alt=""> Image tag, displays an image.
<audio src=""></audio> Audio tag, embeds audio with controls, autoplay, muted, loop.
<video src=""></video> Video tag, embeds video with controls, autoplay, muted, loop.
<iframe></iframe> Embeds another webpage inside your webpage.

Anchor Tag

<a>

<a href="" target="">
Also known as hyperlink tag.
Used to create hyperlinks to other pages, files, or locations.

HTML List Tags

There are three types of list tags in HTML.

Ordered list <ol></ol>.
Unordered list <ul></ul>.
Description list <dl></dl>.

List item <li> (used inside <ol> & <ul>).
Description term <dt>, Description detail <dd> (used inside <dl>).

E.g. (exempli gratia)

HTML Table

HTML tables are used to display data in rows and columns, like in a spreadsheet.

It contains:

<table> Table
<caption> Table caption
<thead> Table head (optional)
<tbody> Table body (optional)
<tfoot> Table footer (optional)
<tr> Table row
<th> Table heading
<td> Table data

E.g.

Need some CSS styling:

HTML Form

The <form> tag is used to collect user input and send it to a server

It contains:

<form> Defines the form container.
action="" URL where form data will be sent.
<label> Defines a label for an input field.
<input> Gets user input (text, email, password, radio, checkbox etc.).
<textarea> Multi-line text input.
<select> Dropdown menu.
<button> Button to submit the form.
<fieldset> Groups related form fields into a box with a border (by default).
<legend> Provides a title for the group defined by <fieldset>.

E.g.

Input type radio:

Used to select only one option from a group.

Input type checkbox:

Used to select multiple options.

HTML Entities

HTML entities are special codes used to display reserved or invisible characters in HTML documents.

Why Use HTML Entities?

To display reserved characters like <, >, & that HTML uses for tags.
To insert special symbols not available on a regular keyboard, like © or €.
To show invisible characters like extra spaces.

Basic Structure of an HTML Entities

An entity starts with an ampersand (&) and ends with a semicolon (;).

< shows <
> shows >
& shows &
€ shows Euro €

We can also use Numeric codes:

< also shows <

Inline vs Block Elements

A block-level element:

Always starts on a new line.
Takes up the full width of its parent container (by default).
Can contain both block and inline element inside it.

Common block elements:

<h1> to <h6>, <ul>, <ol>, <li>, <div>, <section>, <article>, <header>, <footer> etc.

An inline element:

Does not start on a new line.
Only takes up as much width as necessary.
Can contain only text or other inline elements (not block elements).

Common inline elements:

<span>, <a>, <strong>, <em>, <b>, <i>, <img>, <label></label>, <input> etc.

Container Tags

Container tags are HTML elements used to organize and group other elements together.

They help create a logical structure on the page.
Making it easier to style, manipulate, and understand the content.
Some container tags are semantic.
Others are non-semantic.

Common Container Tags:

<div>, <span>, <section>, <article>, <header>, <footer>, <nav>, <main>, <aside> etc.

Semantic vs Non-semantic Tags

Semantic Tags

Tags that clearly describe their meaning and the type of content they contain.

Better page layouts.
Better indexing by Search Engines.
Makes code easier to read and maintain.
Help browsers, developers, and search engines understand the structure and meaning of the webpage.

E.g.

<header>, <footer>, <section>, <article>, <nav>, <main>, <aside>, <form>, <address>, <blockquote>, <abbr> etc.

Non-semantic Tags

Tags that do not describe the content meaning, only used for layout or grouping.

Harder to understand page structure.
Less meaningful for browsers and assistive technologies.
Mainly used for styling or scripting without indicating what content is inside.

E.g.

In short:

Use semantic tags whenever possible to make your HTML meaningful and accessible. Use non-semantic tags like <div> and <span> only when no semantic tag fits.

Best Practices

Use lowercase for tags and attributes.
Always close your tags properly.
Use semantic tags wherever possible.
Keep code clean and indented for readability.
Validate your HTML using tools like W3C Validator.