HTML
HTML stands for HyperText Markup Language, and it is
the backbone of web pages. It provides the structure for
presenting content on the internet. By using tags, HTML
organizes content into blocks and defines their purpose,
such as headings, images, links, or tables.
Understanding "HyperText" and "Markup"
1. HyperText: Refers to text with hyperlinks that allow
navigation between different documents or parts of
a webpage.
Example:
html
2. Markup Language: It uses "tags" (like <h1> for
headings, <p> for paragraphs) to define the layout
and structure of the webpage.
HTML Components
HTML documents are made up of tags, attributes, and
content.
1. Tags: Keywords enclosed in < >, used to create
elements.
Example:
<p>This is a paragraph.</p>
2. Attributes: Extra information about an element,
written inside the opening tag.
Example:
html
3. Elements: The combination of the opening tag,
content, and closing tag.
Example:
html
<h1>HTML Basics</h1>
HTML Page Structure
A complete HTML document has the following structure:
html
Copy code
<!DOCTYPE html> <!-- Defines document type -->
<html lang="en"> <!-- Root of the document -->
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <!-- Responsive design -->
<title>Page Title</title> <!-- Title visible in browser tab
-->
</head>
<body>
<!-- Visible content -->
<h1>Welcome to My Page</h1> <!-- Heading -->
<p>This is a simple webpage created using HTML.</p>
<!-- Paragraph -->
</body>
</html>
Advantages of HTML
1. Ease of Use:
HTML is beginner-friendly and has a simple, readable
syntax, making it the starting point for web
developers.
2. Cross-Browser Compatibility:
HTML content is universally supported across all
major web browsers, ensuring consistent rendering.
3. Flexibility:
It integrates seamlessly with CSS for design and
JavaScript for interactivity, making it adaptable to
any kind of web application.
4. Accessibility:
HTML's semantic tags (like <header>, <footer>,
<main>) improve accessibility for users and assistive
devices like screen readers.
5. SEO Benefits:
Properly structured HTML improves visibility in
search engines, enabling better ranking.
Disadvantages of HTML
1. Limited by Design:
HTML cannot add dynamic behavior by itself.
External languages like JavaScript are needed.
2. Manual Updates:
For large projects, HTML pages must be updated
individually unless templates or frameworks are
used.
3. Requires Styling:
The default look of HTML is plain and unappealing,
relying on CSS for aesthetics.
4. Browser Variability:
Even though it's cross-browser, minor rendering
differences can occur across browsers.
HTML Tags and Their Functions
1. Structural Tags: Define sections of the page.
o <header>: Defines the header section.
o <footer>: Defines the footer of a page.
o <section>: Used for dividing content into
sections.
2. Formatting Tags: Define how text appears.
o <b>: Bold text.
o <i>: Italic text.
o <u>: Underlined text.
3. Media Tags: Add visual or audio elements.
o <img>: Embeds an image.
o <audio>: Embeds sound.
o <video>: Embeds video content.
HTML Example: Full Webpage
Here’s a simple example of a webpage:
Code: html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Personal Portfolio</title>
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I am a web developer who loves creating user-
friendly websites.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<ul>
<li>Project 1: E-commerce Website</li>
<li>Project 2: Blogging Platform</li>
<li>Project 3: To-Do List App</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 My Portfolio. All rights
reserved.</p>
</footer>
</body>
</html>
Output:
1. A structured webpage with a header, navigation
menu, main content, and footer.
2. Section links like "About Me," "Projects," and
"Contact" for navigation.
Conclusion
HTML is the foundation of any webpage. It creates the
structure, but to achieve a modern, visually appealing,
and interactive website, you must combine it with CSS
(for styling) and JavaScript (for interactivity).
