HTML (HyperText Markup Language)
Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language used to create
and design web pages. HTML provides the basic structure of a website by organizing
content such as text, images, videos, links, tables, and forms. Every webpage on the
internet uses HTML in some form.
HTML was developed by Tim Berners-Lee in 1991. Since then, it has evolved through
different versions, with HTML5 being the latest major version. HTML works together with
CSS (Cascading Style Sheets) and JavaScript. HTML defines the structure of a webpage,
CSS controls its appearance, and JavaScript adds interactivity.
HTML uses tags to describe different elements on a webpage. These tags are enclosed
within angle brackets. Most HTML tags have an opening tag and a closing tag. The
content is placed between these tags.
Example:
<p>This is a paragraph.</p>
In this example, <p> is the opening tag and </p> is the closing tag.
Structure of an HTML Document
Every HTML document follows a basic structure.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple webpage.</p>
</body>
</html>
Main Components
1. DOCTYPE Declaration
• Tells the browser that the document uses HTML5.
2. HTML Tag
• The root element of the webpage.
• All other elements are placed inside it.
3. Head Section
• Contains metadata about the webpage.
• Includes title, links to CSS files, and other information.
4. Title Tag
• Displays the webpage title on the browser tab.
5. Body Section
• Contains all visible content shown to users.
Common HTML Elements
Headings
HTML provides six levels of headings.
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h1> is the largest heading and <h6> is the smallest.
Paragraph
Paragraphs are created using the <p> tag.
<p>HTML is used to create webpages.</p>
Line Break
A line break is added using:
<br>
Horizontal Line
A horizontal line is created using:
<hr>
Links in HTML
Links allow users to move from one webpage to another.
<a href="[Link] Website</a>
The href attribute specifies the destination URL.
Images in HTML
Images are added using the <img> tag.
<img src="[Link]" alt="Sample Image">
Attributes:
• src specifies the image location.
• alt provides alternative text if the image cannot be displayed.
Lists in HTML
Ordered List
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Displays items in numbered format.
Unordered List
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
Displays items with bullets.
Tables in HTML
Tables are used to organize data into rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ajay</td>
<td>21</td>
</tr>
</table>
Important tags:
• <table> creates the table.
• <tr> creates a row.
• <th> creates a table heading.
• <td> creates a table cell.
HTML Forms and Modern Features
Forms in HTML
Forms are used to collect user information.
<form>
Name:
<input type="text">
<br>
Password:
<input type="password">
<br>
<input type="submit">
</form>
Common input types:
• Text
• Password
• Email
• Number
• Date
• Radio Button
• Checkbox
• Submit Button
Forms are important for login pages, registration forms, surveys, and online
applications.
HTML Attributes
Attributes provide additional information about elements.
Example:
<a href="[Link] target="_blank">Open Link</a>
Here:
• href specifies the URL.
• target="_blank" opens the link in a new tab.
Semantic HTML
Semantic HTML uses meaningful tags that describe the content.
Examples:
<header></header>
<nav></nav>
<section></section>
<article></article>
<footer></footer>
Benefits:
• Better readability.
• Improved accessibility.
• Better search engine optimization (SEO).
HTML5 Features
HTML5 introduced many new features:
Audio
<audio controls>
<source src="audio.mp3">
</audio>
Video
<video width="400" controls>
<source src="video.mp4">
</video>
Canvas
Used for drawing graphics directly on webpages.
Local Storage
Allows browsers to store data locally without using databases.
Advantages of HTML
1. Easy to learn and use.
2. Supported by all web browsers.
3. Free and open standard.
4. Forms the foundation of every website.
5. Works well with CSS and JavaScript.
6. Supports multimedia content like audio and video.
7. Helps create responsive and accessible webpages.
Conclusion
HTML is the backbone of web development. It provides the structure and organization of
web pages by using tags and elements. From simple text pages to complex websites,
HTML plays a vital role in displaying content on the internet. Understanding HTML is the
first step toward becoming a web developer, as it serves as the foundation for learning
CSS, JavaScript, and other modern web technologies. HTML5 has made web
development more powerful by introducing semantic elements, multimedia support,
and enhanced functionality, making it an essential technology for building modern
websites and web applications.