HTML (HyperText Markup Language) is the standard markup language used to create web pages. It structures web content using elements and tags.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
<html> tag?The <html> tag is the root of an HTML document and contains all other elements such as <head> and <body>.
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
| HTML | XHTML |
|---|---|
| Forgiving syntax | Strict syntax |
| Tags can be unclosed | All tags must be closed |
| Case-insensitive for tags | Tags must be lowercase |
| DOCTYPE optional | DOCTYPE required |
The latest version of HTML is HTML5.
<article>, <section>, <nav>.<audio> and <video>.type="email".
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Features</title>
</head>
<body>
<section>
<h1>Welcome to HTML5</h1>
<video controls>
<source src="sample.mp4" type="video/mp4">
</video>
</section>
</body>
</html>
An HTML document includes the following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Main Heading</h1>
<p>Welcome to the website.</p>
</body>
</html>
Empty elements are tags without closing tags and content.
<br>: Line break<img>: Embeds images<meta>: Metadata
<img src="image.jpg" alt="Example Image">
<br>
<meta charset="UTF-8">
Semantic HTML uses meaningful tags to improve accessibility and SEO.
<article>: Defines an article<section>: Groups related content<nav>: Navigation links
<article>
<h2>Semantic HTML</h2>
<p>This is an example of using semantic tags.</p>
</article>
Save the file with a .html or .htm extension using a text editor.
Open the file in any browser to view the output.
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
| HTML Tag | HTML Element |
|---|---|
Part of an element (e.g., <p>, </p>). |
The complete structure (e.g., <p>Hello</p>). |
| Defines start or end. | Includes tags and content. |
<p>HTML Example</p>
The <head> tag contains metadata and settings for the document, such as the title, styles, and scripts. This content is not displayed directly on the webpage.
<head>
<title>About HTML</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
The <title> tag specifies the title of the HTML document, which appears in the browser tab and search engine results.
<head>
<title>Learn HTML Basics</title>
</head>
The <body> tag contains all the visible content of the webpage, such as text, images, videos, and other elements.
<body>
<h1>Welcome to My Website</h1>
<p>This is the main content of the page.</p>
</body>
| <div> | <span> |
|---|---|
| Block-level element. | Inline element. |
| Creates a new line. | Does not create a new line. |
| Used for grouping block elements. | Used for styling inline text. |
<div>This is a block-level element.</div>
<p>This is an inline element: <span style="color:red;">Red Text</span></p>
HTML comments are added using <!-- and --> and are ignored by the browser.
<!-- This is a comment -->
<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden.</p> -->
The <meta> tag provides metadata about the HTML document, such as character encoding, viewport settings, and descriptions for SEO.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML Basics">
The <img> tag is used to embed an image. The src attribute specifies the image path, and alt provides alternative text for accessibility.
<img src="image.jpg" alt="Example Image" width="300" height="200">
Block-level elements take up the full width of the container and start on a new line, while inline elements only take up as much width as needed and appear within the same line as surrounding content.
<div>This is a block element.</div>
<p>This is an inline element: <span style="color:blue;">Blue Text</span></p>
The <ol> tag creates an ordered (numbered) list, while <ul> creates an unordered (bulleted) list.
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ul>
<li>Bullet One</li>
<li>Bullet Two</li>
<li>Bullet Three</li>
</ul>
The <a> tag creates hyperlinks to other webpages, sections within the same page, or external resources.
<a href="https://www.example.com" target="_blank">Visit Example</a>
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>
Forms are an essential part of web applications as they collect user input and send it to a server for processing. In HTML, forms are created using the <form> tag, which acts as a container for input elements like text fields, buttons, radio buttons, and more.
Key attributes of the <form> tag include:
GET and POST.
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit</button>
</form>
The <input> tag is one of the most versatile HTML elements used to create various input controls in forms, such as text fields, checkboxes, radio buttons, and password fields. It supports different type attributes to customize the input behavior.
Some common type values include:
<input type="text" placeholder="Enter your name">
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to Newsletter</label>
HTML5 introduced several new input types to enhance user experience and simplify data validation. Each input type ensures that the correct data format is entered, reducing the need for external validation.
Popular input types include:
<input type="email" placeholder="Enter your email">
<input type="date">
<input type="color">
name and id attributes in a form?The name and id attributes serve different purposes in forms:
| Attribute | Description |
|---|---|
name |
Used to identify the form field when data is submitted to the server. |
id |
Uniquely identifies an element within the HTML document, often for CSS or JavaScript usage. |
<input type="text" name="username" id="username">
A dropdown menu is created using the <select> tag in HTML, with each option defined by the <option> tag. Dropdown menus are widely used to allow users to select one option from a predefined list.
<label for="country">Choose your country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
The <label> tag associates a text label with a specific input element, improving accessibility and usability. Clicking on the label also activates the associated input field.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Radio buttons are used when you want the user to select only one option from a predefined group. To group radio buttons, use the same name attribute for each button in the group.
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
You can specify a default value for an input field by using the value attribute. For radio buttons or checkboxes, use the checked attribute to set the default option.
<input type="text" name="username" value="Guest">
<input type="radio" name="gender" value="male" checked> Male
The <textarea> tag is used for creating a multi-line text input field, ideal for collecting longer text inputs like comments or messages.
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">Default text</textarea>
HTML5 introduces built-in validation attributes to ensure user input meets specific criteria. Common validation attributes include:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99">
<button type="submit">Submit</button>
</form>
To embed a video in an HTML document, you use the <video> tag. The <video> tag supports attributes like controls, autoplay, loop, and muted to control playback behavior.
<video controls width="640" height="360">
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Embedding audio in HTML is done using the <audio> tag. You can add attributes like controls, autoplay, and loop for customization.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
The <iframe> tag is used to embed another HTML document or external content (like YouTube videos) within the current page.
<iframe src="https://www.example.com" width="600" height="400" frameborder="0">
Your browser does not support iframes.
</iframe>
You can add captions to a video using the <track> tag within the <video> tag. The <track> tag requires attributes like kind, src, and label.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>
HTML5 supports the following video formats:
Audio playback is controlled using attributes like controls for a user interface, autoplay to start playback automatically, loop to repeat, and muted to start without sound.
<audio controls autoplay loop muted>
<source src="audio.mp3" type="audio/mpeg">
</audio>
The <canvas> element is used for rendering graphics on the fly via JavaScript. It is ideal for creating interactive content like games, charts, and animations.
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 75);
</script>
The <embed> and <object> tags are used to embed external resources like PDFs or multimedia files into an HTML document. The key differences are:
| <embed> | <object> |
|---|---|
| Directly embeds content into the page. | Provides more control over the embedded content. |
| Does not allow fallback content. | Allows fallback content if the resource fails to load. |
To embed external content, use tags like <iframe>, <embed>, or <object>, depending on the type of resource.
<iframe src="https://example.com" width="600" height="400"></iframe>
An image map allows you to create clickable areas on an image that link to different destinations. Use the <map> and <area> tags.
<img src="image.jpg" usemap="#mapname" alt="Example Image">
<map name="mapname">
<area shape="rect" coords="0,0,100,100" href="https://example.com">
<area shape="circle" coords="150,75,50" href="https://another.com">
</map>
Global attributes can be applied to any HTML element. Common global attributes include:
The class and id attributes are used for identifying and styling HTML elements:
class: Used to group elements for styling with CSS. Multiple elements can share the same class.id: Used to uniquely identify a single element. Should only be used once per page.
<div class="container">Content</div>
<div id="uniqueId">Unique Content</div>
The alt attribute provides alternative text for an image, improving accessibility and SEO. It is displayed if the image fails to load.
<img src="image.jpg" alt="Description of the image">
The src (source) attribute specifies the location of external resources such as images, videos, or scripts.
<img src="path/to/image.jpg" alt="Example Image">
<script src="script.js"></script>
The target attribute specifies where to open a linked document:
_blank: Opens the link in a new tab or window._self: Opens the link in the same tab (default behavior).
<a href="https://example.com" target="_blank">Open in New Tab</a>
<a href="https://example.com" target="_self">Open in Same Tab</a>
Custom data attributes allow embedding additional information into HTML elements. They are prefixed with data- and can be accessed in JavaScript.
<div data-id="123" data-role="admin">Content</div>
The style attribute allows inline CSS styling directly on an element.
<p style="color: blue; font-size: 16px;">Styled Text</p>
The title attribute specifies additional information about an element, shown as a tooltip when the user hovers over the element.
<img src="image.jpg" alt="Image" title="This is a tooltip">
The rel attribute defines the relationship between the current document and the linked resource. Common values include:
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
The href (hyperlink reference) attribute specifies the URL of the resource being linked, such as stylesheets or anchor links.
<a href="https://example.com">Visit Example</a>
<link href="styles.css" rel="stylesheet">
The <article> tag defines self-contained content that is meant to be independently distributable or reusable. Examples include blog posts, news articles, or forum posts.
<article>
<h2>Understanding the Article Tag</h2>
<p>The <article> tag is perfect for standalone pieces of content.</p>
</article>
The <section> tag represents a thematic grouping of content, typically with a heading. Unlike <div>, <section> carries semantic meaning and helps structure the document logically.
<section>
<h2>About Us</h2>
<p>Information about the company.</p>
</section>
The <nav> tag defines a block of navigation links. It is typically used for primary or secondary menus on a webpage.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
The <footer> tag represents the footer section of a document or section, often containing author information, copyright notices, or navigation links.
<footer>
<p>© 2025 Your Company Name. All rights reserved.</p>
</footer>
The <aside> tag defines content that is indirectly related to the main content, such as sidebars, advertisements, or related links.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="article1.html">Article 1</a></li>
<li><a href="article2.html">Article 2</a></li>
</ul>
</aside>
The <header> tag is used for content headers, such as logos or navigation menus, while <head> is for metadata and links to external resources.
<header>
<h1>Welcome to Our Site</h1>
<nav>...</nav>
</header>
The <figure> tag groups media content, such as images or diagrams, with a <figcaption> tag to describe it.
<figure>
<img src="image.jpg" alt="A beautiful sunset">
<figcaption>A breathtaking sunset over the ocean.</figcaption>
</figure>
The <progress> tag displays progress of a task, such as file uploads or installation processes.
<progress value="70" max="100">70%</progress>
The <time> tag represents a specific time or date, which can be machine-readable for applications like calendars or event tracking.
<time datetime="2025-01-01">January 1, 2025</time>
The <dialog> tag is used to create a dialog box or modal window for user interactions like forms or notifications.
<dialog open>
<p>This is a dialog box.</p>
<button>Close</button>
</dialog>
ARIA (Accessible Rich Internet Applications) attributes improve accessibility by defining roles, states, and properties for interactive HTML elements.
<button aria-label="Submit form">Submit</button>
Accessibility in HTML involves using semantic elements, ARIA roles, proper labels, and keyboard navigation to ensure usability for all users, including those with disabilities.
The lang attribute specifies the language of the content, aiding screen readers and search engines in providing better services.
<html lang="en">
The tabindex attribute controls the order of elements when navigating using the keyboard's Tab key.
<button tabindex="1">First</button>
<button tabindex="2">Second</button>
The aria-label attribute provides an accessible name for elements that don't have visible labels.
<button aria-label="Close"></button>
Responsive websites adapt to different screen sizes. Use the viewport meta tag and CSS media queries for responsiveness.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML plays a vital role in SEO by using semantic tags, proper headings, meta tags, and alt attributes to make content discoverable by search engines.
Semantic elements like <header>, <article>, and <footer> give meaning to content, making it more accessible and improving SEO.
Inline styles make code less maintainable and harder to reuse compared to external stylesheets.
Use compressed image formats like WebP, responsive images with srcset, and the loading="lazy" attribute.
<img src="image.jpg" loading="lazy" alt="Optimized Image">
Lazy loading defers the loading of non-critical resources like images until they are needed, improving page performance.
The <picture> tag allows you to specify multiple image sources for different screen sizes or resolutions.
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-small.jpg" media="(max-width: 799px)">
<img src="fallback.jpg" alt="Responsive Image">
</picture>
Use the <script> tag with the src attribute to include external JavaScript files.
<script src="script.js"></script>
Both attributes improve JavaScript loading, but:
async: Loads script asynchronously but may execute out of order.defer: Ensures scripts execute in order after the HTML parsing is complete.The <base> tag specifies a base URL for all relative links in a document, simplifying URL management.
<base href="https://example.com/">
Minimizing an HTML file size is crucial for improving page load speed and performance. Techniques include:
<!-- Minified Example -->
<!DOCTYPE html><html><head><title>Minimized</title></head><body><h1>Hello</h1></body></html>
To prevent browsers from caching your HTML content, you can use cache-busting techniques like:
<script src="script.js?v=2.0"></script>
Cache-Control: no-store, no-cache, must-revalidate
Best practices for writing clean and maintainable HTML include:
Debugging HTML involves identifying and fixing issues in the document. Common debugging steps include:
The <noscript> tag defines content to display if JavaScript is disabled or not supported by the browser. It is particularly useful for providing fallback messages or alternative content.
<noscript>
<p>JavaScript is required to view this page properly.</p>
</noscript>
HTML elements are categorized as inline, block, or inline-block based on their behavior in the document flow:
<!-- Example -->
<div style="display: block;">Block Element</div>
<span style="display: inline;">Inline Element</span>
<div style="display: inline-block; width: 100px;">Inline-Block Element</div>
The <script> tag is used to include JavaScript in an HTML document, while the <noscript> tag defines content displayed if JavaScript is disabled or not supported by the browser.
<script>
console.log('JavaScript is enabled!');
</script>
<noscript>
<p>Your browser does not support JavaScript.</p>
</noscript>
The <data> tag links a piece of content with a machine-readable value. It is commonly used for structured data or metadata representation.
<p>Price: <data value="29.99">$29.99</data></p>
You can create a tooltip by using the title attribute. The tooltip is displayed when the user hovers over the element.
<a href="https://example.com" title="Click to visit Example">Visit Example</a>
The <template> tag is used to define reusable HTML fragments that are not rendered directly in the DOM. They can be cloned and inserted dynamically using JavaScript.
<template id="myTemplate">
<p>This is a reusable template.</p>
</template>
<script>
const template = document.getElementById('myTemplate');
document.body.appendChild(template.content.cloneNode(true));
</script>
A favicon is a small icon displayed in the browser tab. To include one, use the <link> tag with rel="icon".
<link rel="icon" href="favicon.ico" type="image/x-icon">
To make a hyperlink open in a new tab, use the target="_blank" attribute in the <a> tag.
<a href="https://example.com" target="_blank">Open in New Tab</a>
Relative URLs: Specify a path relative to the current document.
Absolute URLs: Specify the full path, including the protocol and domain name.
<!-- Relative URL -->
<a href="about.html">About Us</a>
<!-- Absolute URL -->
<a href="https://example.com/about.html">About Us</a>
Both tags make text bold, but <strong> conveys importance semantically, while <b> is purely presentational.
<p>This is <strong>important</strong> text.</p>
<p>This is <b>bold</b> text.</p>
Both tags italicize text, but <em> conveys emphasis semantically, while <i> is purely for presentation.
<p>This is <em>emphasized</em> text.</p>
<p>This is <i>italic</i> text.</p>
Custom data attributes allow you to store additional data directly in HTML elements using attributes prefixed with data-.
<div data-id="123" data-role="admin">User Info</div>
The <base> tag specifies a base URL for all relative links in the document, making it easier to manage multiple relative URLs.
<base href="https://example.com/">
The <meta> viewport tag controls the layout and scaling of a webpage on different screen sizes, making it essential for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The <address> tag is used to define contact information for the author or owner of the document.
<address>
Written by John Doe.<br>
Visit us at: <a href="https://example.com">Example</a>
</address>
The <abbr> tag represents an abbreviation or acronym, providing the full form when hovered over.
<p>The term <abbr title="Hypertext Markup Language">HTML</abbr> is widely used.</p>
<ol> creates an ordered (numbered) list, while <ul> creates an unordered (bulleted) list.
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<ul>
<li>Bullet Item</li>
<li>Another Item</li>
</ul>
The <hr> tag is used to create a horizontal rule, which acts as a thematic break.
<hr>
The <mark> tag highlights text, indicating relevance or importance.
<p>This is <mark>important</mark> text.</p>
Use the <link> tag to include an external CSS file in the <head> section of your HTML document.
<link rel="stylesheet" href="styles.css">
Use the style attribute within an HTML tag to include inline CSS.
<p style="color: red; font-size: 16px;">This is styled text.</p>