HTML Basics
Structure of an HTML Document
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>
Basic HTML Elements
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>
Attributes
HTML attributes provide additional information about elements. Common attributes include:
href
for links,src
for images,alt
for images (describes the image for screen readers).id
andclass
are used to assign unique or reusable identifiers to elements.
Example:
<a href="https://example.com" class="link-button" id="learnMore">Learn More</a>
2. Intermediate HTML
Forms in HTML
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 in HTML
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 HTML
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>
3. Advanced HTML
HTML5 APIs
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>
Drag and Drop API
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>
4. HTML Best Practices
Accessibility (a11y)
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">
SEO (Search Engine Optimization)
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.
Performance Optimizations
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: