HTML (HyperText Markup Language) is the standard language for creating web pages. Every website you visit is built using HTML. It defines the structure and content of a webpage, while CSS adds styling and JavaScript makes it interactive.
Definition of HTML
HTML stands for HyperText Markup Language. It is the standard language used to create web pages. The term “HyperText” refers to text that contains links to other documents. “Markup Language” means it uses tags to define elements within a document.
HTML provides the basic structure of a webpage. It works alongside CSS (Cascading Style Sheets) for styling and JavaScript for adding interactivity. HTML tells the web browser what content to display, CSS controls how it looks, and JavaScript makes it dynamic.
Basic Structure of an HTML Document
Every HTML document follows a standard structure. This structure ensures the browser interprets the content correctly.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>HTML Page Structure
1. <!DOCTYPE html>
This declaration tells the browser that the document is an HTML5 file. It must be the first line in an HTML document.
2. <html>
This is the root element of an HTML page. All other elements must be placed inside it.
3. <head>
The head section contains metadata, which is information about the webpage. This includes the title, character encoding, and links to CSS files.
4. <title>
The title element sets the name of the webpage, which appears in the browser tab. It is also important for SEO (Search Engine Optimization).
5. <meta>
Meta tags provide additional information about the page. The charset="UTF-8" ensures proper text encoding, while viewport settings help in mobile responsiveness.
6. <body>
The body section contains all the visible content of the webpage, such as text, images, and links.
HTML Elements
The following are most important elements of HTML.
1. Headings (<h1> to <h6>)
Headings help organize content hierarchically. The <h1> tag is the most important and should be used only once per page. <h2> to <h6> represent subheadings of decreasing importance.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>Using headings correctly improves readability and SEO.
2. Paragraphs (<p>)
The <p> tag defines a paragraph. It automatically adds space before and after the text.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>3. Links (<a>)
Links allow users to navigate between pages. The href attribute specifies the destination URL.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>To open a link in a new tab, use target="_blank".
<a href="https://example.com" target="_blank">Open in New Tab</a>4. Images (<img>)
The <img> tag embeds images into a webpage. The src attribute defines the image path, and alt provides alternative text for accessibility.
<img src="image.jpg" alt="A beautiful landscape">5. Lists (<ul>, <ol>, <li>)
- Unordered List (
<ul>) → Bullet points. - Ordered List (
<ol>) → Numbered list. - List Item (
<li>) → Each item in the list.
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>6. Line Breaks (<br>) & Horizontal Rules (`<hr>)
<br>→ Forces a line break.<hr>→ Creates a horizontal line (thematic break).
<p>First line<br>Second line</p>
<hr>
<p>New section starts here.</p>Semantic HTML5 Elements
Semantic HTML improves accessibility, SEO, and code readability.
Semantic Tags
| Tag | Purpose |
|---|---|
<header> | Introductory content (logo, navigation). |
<nav> | Navigation links. |
<main> | Main content of the page. |
<article> | Independent content (blog post, news). |
<section> | Thematic grouping of content. |
<aside> | Side content (ads, related links). |
<footer> | Footer (copyright, contact info). |
Example:
<header>
<h1>Website Title</h1>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>Content goes here...</p>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>When to Use <div> and <span>?
<div>→ A block-level container (for layout).<span>→ An inline container (for styling text).
HTML Tables (<table>, <tr>, <th>, <td>)
Tables organize data into rows and columns. They should only be used for tabular data, not for webpage layout.
Basic Table Structure
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table><table>→ Container for the table.<tr>→ Table row.<th>→ Table header (bold).<td>→ Table data cell.
Advanced Table Features
colspan→ Merges columns.rowspan→ Merges rows.
<table border="1">
<tr>
<th colspan="2">Personal Info</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</table>Forms in HTML
Forms collect user input, such as login details or survey responses.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>action: Specifies where the form data is sent.method: Can beGET(visible in URL) orPOST(hidden).
Common Form Elements
| Element | Purpose |
|---|---|
<input> | Text, password, radio, checkbox. |
<textarea> | Multi-line text input. |
<select> | Dropdown list. |
<button> | Clickable button. |
<label> | Describes an input (improves accessibility). |
Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<button type="submit">Login</button>
</form>HTML5 Multimedia
Here are HTML5 multimedia tags.
1. Embedding Videos
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support videos.
</video>controls→ Shows play/pause buttons.autoplay→ Starts automatically (not recommended).loop→ Repeats the video.
2. Embedding Audio
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
