HTML BASICS - Notes
1. Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language used to design
and create web pages. Every web page that you see on the internet is written in HTML, which
provides the structure and layout for content on the page. It uses special codes called tags
to define how elements like text, images, videos, and links should appear in a browser.
The term “HyperText” means text that contains links to other text (called hyperlinks).
“Markup Language” refers to the way tags are used to mark up elements within a document.
HTML is not a programming language — it is a markup language used to describe the
structure of web content.
HTML files are saved with the extension “.html” or “.htm” and can be opened using any web
browser (such as Google Chrome, Firefox, Edge, etc.) or text editor (like Notepad, VS Code,
or Sublime Text).
2. Structure of an HTML Document
An HTML document has a specific structure that must be followed so that browsers can
interpret and display it correctly.
A basic HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph in HTML.</p>
</body>
</html>
Explanation:
<!DOCTYPE html> — Declares that this is an HTML5 document.
<html> — The root element that contains all the content of the page.
<head> — Contains metadata such as title, character encoding, and links to external
files (like CSS or JavaScript).
<title> — Sets the title of the web page shown in the browser’s tab.
<body> — Contains the visible content such as text, images, and hyperlinks.
3. HTML Elements and Tags
HTML is made up of elements, and each element is represented by a tag. Tags are written
inside angle brackets (< >) and usually come in pairs: an opening tag and a closing tag.
For example:
<p>This is a paragraph.</p>
Here, <p> is the opening tag, and </p> is the closing tag.
Common HTML Tags:
Tag Description
<h1> to <h6> Defines headings from largest to smallest.
<p> Defines a paragraph.
<a href="URL"> Creates a hyperlink.
<img src="image.jpg" alt="description"> Inserts an image.
<br> Inserts a line break.
<hr> Adds a horizontal line.
<b> Makes text bold.
<i> Makes text italic.
<u> Underlines text.
Example:
<h1>This is Heading 1</h1>
<p>This is a simple paragraph.</p>
<a href="https://www.google.com">Click Here to visit Google</a>
4. HTML Attributes
Attributes provide additional information about HTML elements. They are written inside the
opening tag and usually come in name-value pairs like this:
attribute="value"
Common Attributes:
href — used in <a> to specify the link.
src — used in <img> to specify the image source.
alt — gives alternate text for an image.
width and height — specify the size of images or elements.
style — used for inline CSS styling.
id and class — used to uniquely identify or group elements.
Example:
<img src="flower.jpg" alt="Beautiful Flower" width="300" height="200">
<a href="https://www.example.com" target="_blank">Visit Example Site</a>
5. Headings, Paragraphs, and Text Formatting
HTML offers six levels of headings — <h1> (largest) to <h6> (smallest). Headings help
organize content hierarchically and are important for SEO.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
Text content is usually written within <p> tags. You can format text using tags like <b>, <i>,
<u>, <strong>, and <em>.
Example:
<p>This is a <b>bold</b> word and this is <i>italic</i>.</p>
<p><u>Underlined text</u> can be used for emphasis.</p>
6. Lists in HTML
HTML supports two types of lists:
1. Ordered List (<ol>) — Displays numbered items.
2. Unordered List (<ul>) — Displays bullet points.
Each list item is enclosed in <li> tags.
Example:
<h3>Ordered List</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
7. Links and Images
Hyperlinks:
Links connect one web page to another. The <a> tag is used for links.
Example:
<a href="https://www.google.com" target="_blank">Visit Google</a>
Images:
The <img> tag is used to display images.
Example:
<img src="photo.jpg" alt="My Photo" width="250" height="200">
8. Tables in HTML
Tables are used to display data in rows and columns.
Tags Used:
<table> — defines the table.
<tr> — defines a row.
<th> — defines a header cell.
<td> — defines a data cell.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>20</td>
</tr>
<tr>
<td>Purvi</td>
<td>19</td>
</tr>
</table>
9. Forms in HTML
Forms are used to collect user input. The <form> tag contains form elements like text boxes,
radio buttons, and submit buttons.
Example:
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="username"><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<input type="submit" value="Submit">
</form>
10. HTML Comments
Comments are used to explain code and are not displayed in the browser.
<!-- This is a comment -->
11. HTML5 Features
HTML5 is the latest version of HTML, introduced to make websites more powerful and user-
friendly.
Some new tags introduced are:
<header>, <footer>, <nav>, <article>, <section> — used for better page structure.
<audio> and <video> — for multimedia content.
<canvas> — for drawing graphics using JavaScript.
<input type="email">, <input type="date">, <input type="range"> — for new input
controls.
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
12. Conclusion
HTML forms the foundation of every website. It provides the structure upon which CSS adds
style and JavaScript adds interactivity. By learning HTML basics — tags, elements, attributes,
and structure — you can create simple and effective web pages. Mastering HTML is the first
step toward becoming a full-fledged web developer.
