<!DOCTYPE html> <!-- Document type declaration -->
<html> <!-- Root element -->
<head> <!-- Document head containing metadata -->
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive viewport settings -->
<title>Your Page Title</title> <!-- Page title displayed in the browser tab -->
<link rel="stylesheet" href="styles.css"> <!-- Link to an external stylesheet -->
<style>
/* Internal CSS styles */
</style>
<script src="script.js"></script> <!-- Link to an external JavaScript file -->
</head>
<body> <!-- Document body where visible content goes -->
<header> <!-- Header section -->
<h1>Heading 1</h1> <!-- Heading with the largest font size -->
<h2>Heading 2</h2> <!-- Subheading -->
<nav> <!-- Navigation menu -->
<ul>
<li><a href="#">Home</a></li> <!-- List item with a link -->
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</header>
<main> <!-- Main content section -->
<section> <!-- Section with a heading -->
<h2>Section Title</h2>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Visit Example</a> <!-- Link to an external website -->
<img src="image.jpg" alt="Image Description"> <!-- Image with alternative text -->
</section>
<article> <!-- Independent, self-contained content -->
<h3>Article Title</h3>
<p>Article content goes here.</p>
</article>
</main>
<aside> <!-- Sidebar or supplementary content -->
<h3>Sidebar Title</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</aside>
<footer> <!-- Footer section -->
<p>© 2023 Your Website Name</p> <!-- Copyright notice -->
</footer>
</body>
</html>
Structure
<html>and</html>enclose the entire HTML document.<head>and</head>contain information about the document, such as the title and meta tags.<body>and</body>contain the content of the document, such as headings, paragraphs, and images.
Headings
<h1>to<h6>create headings of different sizes.<p>creates a paragraph.
Lists
<ul>creates an unordered list.<ol>creates an ordered list.<li>creates a list item.
Images
<img>inserts an image into the document.
Links
<a>creates a link to another document or resource.
Tables
<table>and</table>enclose a table.<tr>and</tr>create rows in a table.<td>and</td>create cells in a table.
Forms
<form>and</form>enclose a form.<input>creates a text input field.<select>creates a drop-down list.<button>creates a button.
Attributes
- Attributes are used to specify additional information about elements. For example, the
srcattribute of the<img>element specifies the source of the image.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>This is my web page!</h1>
<p>This is a paragraph on my web page.</p>
<img src="https://example.com/image.png" alt="Image of a cat">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>