Every HTML page starts with a <!DOCTYPE html> declaration, followed by <html>, which is the root element. Inside <html>, there are two main sections:
-
Head section: It contains meta-information about the document (like the title, links to stylesheets, and metadata).
-
Body section: This is where the visible content (text, images, videos) goes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
-
Headings: These elements (
<h1>to<h6>) define headings.<h1>is the largest, and<h6>is the smallest.<h1>Main Title</h1> <h2>Subheading</h2>
-
Paragraphs and Line Breaks:
-
<p>defines a paragraph. -
<br>is used for a line break.
<p>This is a paragraph of text.</p> <p>This is another paragraph.<br>With a line break inside.</p>
-
-
Links:
<a href="URL">is used to create hyperlinks.<a href="https://www.example.com" target="_blank">Visit Example</a>
-
Images: The
<img>element embeds an image.<img src="image.jpg" alt="Description of the image" width="500">
-
Lists:
-
Ordered Lists (
<ol>): Numbered items.<ol> <li>First item</li> <li>Second item</li> </ol>
-
Unordered Lists (
<ul>): Bulleted items.<ul> <li>Item one</li> <li>Item two</li> </ul>
-
HTML attributes provide additional information about elements. Common attributes include:
-
hreffor links,srcfor images,altfor images (describes the image for screen readers). -
idandclassare used to assign unique or reusable identifiers to elements.
Example:
<a href="https://example.com" class="link-button" id="learnMore">Learn More</a>Forms allow users to input data, which is sent to the server for processing. Key elements include:
-
<form>: The container for all form elements. -
<input>: Used for various types of user input (text, password, email, checkbox). -
<label>: Associates text with a form element for accessibility. -
<button>and<input type="submit">: Submits the form.
Example:
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Login">
</form>Tables allow you to display data in rows and columns using the following elements:
-
<table>: The container for the table. -
<tr>: Defines a row in the table. -
<th>: Defines a header cell. -
<td>: Defines a standard cell.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
Semantic elements give meaning to your content. They make it easier for search engines and assistive technologies to understand your page. Key semantic tags include:
-
<article>: Independent content such as a blog post. -
<section>: A section of content, such as chapters or thematic groups. -
<nav>: Navigation links. -
<header>and<footer>: Top and bottom content areas of a page. -
<aside>: Side content, such as a sidebar.
Example:
<article>
<header>
<h2>Blog Post Title</h2>
<p>Written by Author</p>
</header>
<p>This is the content of the blog post.</p>
<footer>
<p>Published on Date</p>
</footer>
</article>
-
Local Storage API: Local storage allows storing data locally in the user's browser that persists even after closing the browser. It’s useful for saving user settings, preferences, or small pieces of data.
Example:
<script> // Storing data localStorage.setItem("username", "JohnDoe"); // Retrieving data let username = localStorage.getItem("username"); console.log(username); </script>
-
Canvas API: The
<canvas>element is used to draw graphics (like charts or game elements) on a web page.Example:
<canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "blue"; ctx.fillRect(20, 20, 150, 100); </script>
-
Geolocation API: This API allows web applications to get the user's geographic location (with their permission).
Example:
<button onclick="getLocation()">Get My Location</button> <p id="location"></p> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById('location').innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { document.getElementById('location').innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
This allows elements to be draggable and dropped into different parts of a web page.
Example:
<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me!</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:100px;">
Drop here
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>-
Use descriptive alt text for images.
-
Use proper labels for form elements for screen readers.
-
Ensure a clear focus state for interactive elements (like links and buttons) for keyboard navigation.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-label="Email Address">-
Title and meta tags: Ensure that each page has a unique title and meta description.
<title>My Website</title> <meta name="description" content="This is a description of my website.">
-
Heading hierarchy: Use proper heading levels (
<h1>,<h2>, etc.) to structure your content.
-
Lazy loading images: Load images only when they are about to enter the viewport.
<img src="image.jpg" alt="Example" loading="lazy">
-
Minify HTML: Remove unnecessary characters (whitespace, comments) to reduce file size.
-
Async and defer for scripts: Load JavaScript files without blocking the page rendering.
<script src="script.js" async></script>
GitHub Repository: