HTML – BASIC NOTES
1. Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language used to create and
design web pages. HTML describes the structure of a webpage using elements and tags.
HTML is not a programming language; it is a markup language that tells the browser how to
display content such as text, images, links, and videos.
HTML was developed by Tim Berners-Lee in 1991 while working at CERN. It was created as
part of the World Wide Web to allow researchers to share information easily over the internet.
HTML is used together with other technologies such as:
JavaScript – for interactivity
CSS – for styling and design
2. Features of HTML
HTML has many features that make it suitable for building web pages.
1. Easy to Learn
HTML has simple syntax and is easy for beginners to understand.
2. Platform Independent
HTML pages can run on any device and any operating system.
3. Supports Multimedia
HTML allows embedding images, audio, and video.
4. Hyperlink Support
HTML allows linking between web pages using hyperlinks.
5. Lightweight
HTML files are small in size and load quickly in browsers.
3. Structure of an HTML Document
Every HTML document follows a basic structure.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
Explanation
<!DOCTYPE html>
Defines the document type and HTML version.
<html>
The root element of an HTML document.
<head>
Contains information about the page such as title and metadata.
<title>
Specifies the title of the webpage.
<body>
Contains the visible content of the webpage.
4. HTML Tags
HTML uses tags to define elements.
Tags are written inside angle brackets.
Example:
<tagname> Content </tagname>
Example:
<p>This is a paragraph</p>
Types of Tags
1. Paired Tags
Have opening and closing tags.
Example:
<b>Bold Text</b>
2. Unpaired Tags
Do not have closing tags.
Example:
<br>
<hr>
5. HTML Headings
HTML provides heading tags to define headings.
There are six levels of headings.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
Heading tags:
<h1> Largest heading
<h2>
<h3>
<h4>
<h5>
<h6> Smallest heading
Headings help organize webpage content.
6. HTML Paragraphs
Paragraphs are defined using the <p> tag.
Example:
<p>This is a paragraph in HTML.</p>
HTML automatically adds space before and after paragraphs.
Line Break
To insert a line break use the <br> tag.
Example:
Hello <br> World
7. HTML Formatting Tags
HTML provides tags to format text.
Examples:
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<strong>Important Text</strong>
<em>Emphasized Text</em>
These tags help make the content more readable and attractive.
8. HTML Links
Links allow users to navigate between webpages.
Links are created using the <a> tag.
Example:
<a href="[Link] Google</a>
Attributes
Attributes provide additional information about elements.
Example:
<a href="[Link]">Go to Page 2</a>
The href attribute specifies the URL of the page.
9. HTML Images
Images can be added using the <img> tag.
Example:
<img src="[Link]" alt="Sample Image">
Image Attributes
src – image source
alt – alternative text
width – width of image
height – height of image
Example:
<img src="[Link]" width="300" height="200">
Images make webpages more attractive and informative.
10. HTML Lists
Lists are used to organize information.
Ordered List
Displays items with numbers.
Example:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Unordered List
Displays items with bullets.
Example:
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
Description List
Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
11. HTML Tables
Tables are used to display data in rows and columns.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
</table>
Table Tags
<table> – creates table
<tr> – table row
<th> – table header
<td> – table data
Tables are commonly used for displaying structured information.
12. HTML Forms
Forms are used to collect user input.
Example:
<form>
Name: <input type="text"><br>
Password: <input type="password"><br>
<input type="submit">
</form>
Common Form Elements
Text box
Password field
Radio button
Checkbox
Submit button
Forms are widely used in login pages, registration pages, and surveys.
13. Advantages of HTML
Easy to learn and use
Supported by all web browsers
Lightweight and fast
Allows multimedia integration
Forms the foundation of all websites
14. Conclusion
HTML is the basic building block of web development. It provides the structure and layout of
webpages. Combined with CSS and JavaScript, HTML can create modern, interactive, and
visually appealing websites.
Learning HTML is the first step for anyone interested in web development and website design.
