1. Introduction to HTML
HTML, or HyperText Markup Language, is the fundamental language used to create and structure content on the web. It allows developers to define headings, paragraphs, links, images, lists, tables, and other elements that make up a webpage. Every website, from the simplest personal page to complex web applications, starts with HTML. By using tags, HTML communicates to browsers how content should be displayed and organized. Learning HTML is the first step for anyone who wants to build websites, as it forms the backbone of all web development alongside CSS and JavaScript.
2. Basic Document Structure
Every HTML page follows a standard structure. It begins with a <!DOCTYPE html> declaration
to define the HTML version, followed by the <html> root element.
Inside <html>, there are two main sections: <head> and
<body>.
The <head> contains meta-information, the page title, and links to stylesheets or scripts,
while the <body> contains the visible content such as text, images, links, and other
elements.
This basic structure is essential for every web page to be properly rendered by browsers.
3. Elements & Tags
HTML is made up of elements, which are the building blocks of a web page.
Each element is represented by tags, usually written in angle brackets like
<tag>.
Most elements have an opening tag <tag> and a closing tag </tag>, with
content placed in between.
For example, a paragraph uses the <p> tag, a heading uses <h1> to
<h6>, and links use <a>.
Understanding elements and tags is fundamental to creating structured web pages.
4. Headings
Headings in HTML are used to define the titles and subtitles on a webpage.
They range from <h1> (largest) to <h6> (smallest).
Headings help organize content and improve readability.
They are also important for SEO, as search engines give headings higher weight.
5. Paragraphs
Paragraphs are used to group text content together in a block.
In HTML, paragraphs are created using the <p> tag.
Browsers automatically add spacing before and after paragraphs, making the text more readable.
6. Links
Links are used to navigate from one page to another or to an external website.
In HTML, links are created using the <a> tag with the href attribute, which
specifies the URL.
Clicking the link will take the user to the specified address.
7. Images
Images are added to web pages using the <img> tag.
The src attribute specifies the path to the image,
and the alt attribute provides alternative text if the image cannot be displayed.
You can also set width and height to control the image size.
8. Lists
HTML provides two main types of lists: unordered lists and ordered lists.
Unordered lists use bullets, while ordered lists use numbers. Each list item is added using the
<li> tag.
9. Tables
HTML tables are used to display data in rows and columns.
The <table> tag creates a table,
<tr> defines a table row,
<th> defines a header cell, and
<td> defines a standard cell.
10. Forms
HTML forms allow users to submit data to a website.
The <form> tag wraps all form elements.
Common input types include text, email, password, radio,
checkbox, and submit buttons.
11. Audio & Video
HTML allows you to embed audio and video directly on a webpage using the
<audio> and <video> tags.
The controls attribute adds play, pause, and volume controls.
You can also specify width, height, autoplay, and loop options.
12. Semantic Tags
Semantic tags in HTML clearly describe the purpose of the content they contain.
These tags improve readability for developers and accessibility for browsers and search engines.
Examples include <header>, <footer>, <article>,
<section>, <nav>, and <aside>.