HTML
HTML (HyperText Markup Language) is the foundational language used to create web pages. It structures content on the web by using a series of elements and tags. An HTML document begins with the <!DOCTYPE html> declaration, followed by the <html> element, which encloses all other elements. The <head> section contains meta-information and links to external resources, while the <body> contains the visible content of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to HTML</p>
</body>
</html>1. HTML Elements
HTML elements are the basic building blocks of HTML documents. An element consists of a start tag, content, and an end tag. For example, the <p> element represents a paragraph. HTML elements can be nested inside one another to create complex structures. The correct nesting of elements is crucial for proper document rendering and accessibility.
<h1>Main Heading</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Click here</a>
<img src="image.jpg" alt="Description">2. HTML Attributes
Attributes provide additional information about an HTML element and are included in the start tag. They are written as name-value pairs. For instance, the href attribute in the <a> tag specifies the URL of the linked page. Attributes help define the behavior and appearance of elements and can be used to enhance functionality.
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="logo.png" alt="Company Logo" width="100" height="50">3. HTML Forms
HTML forms are used for gathering user input. Forms consist of various controls such as text fields, radio buttons, checkboxes, and submit buttons. The <form> element wraps around form controls and includes attributes like action (URL where the form data is sent) and method (HTTP method used to submit the form).
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>4. HTML Tables
Tables are used to present data in a tabular format. The <table> element contains table rows defined by the <tr> element. Each row can have header cells (<th>) and data cells (<td>). Tables are particularly useful for displaying complex data in a structured manner.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
</tbody>
</table>5. HTML Semantic Elements
Semantic elements provide meaning to web content, making it more accessible and easier for search engines to understand. Elements like <header>, <nav>, <article>, <section>, and <footer> help structure the document logically, improving both user experience and SEO.
<header>
<h1>Site Title</h1>
<nav>
<a href="#home">Home</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Information about our company.</p>
</section>
</main>
<footer>
<p>© 2024 Company Name</p>
</footer>6. HTML Media Elements
HTML provides elements for embedding media content such as audio and video. The <audio> and <video> elements support various media formats and can include controls for playback. These elements enhance the multimedia experience on the web.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>7. HTML Document Structure
The structure of an HTML document is hierarchical. It starts with the <!DOCTYPE html> declaration, followed by the <html> root element. Inside, the <head> section includes metadata, while the <body> section contains the content. Proper structure ensures that the document is well-formed and renders correctly across different browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>Header Content</header>
<main>Main Content</main>
<footer>Footer Content</footer>
</body>
</html>8. HTML Links and Navigation
HTML links are created using the <a> element. The href attribute specifies the URL or target of the link. For navigation purposes, links can be grouped within a <nav> element to provide users with a menu or other navigation aids.
<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>9. HTML Meta Tags
Meta tags provide metadata about the HTML document. They are placed within the <head> section and include information like character encoding, description, and viewport settings. These tags are crucial for defining how content is interpreted and displayed, especially on different devices and search engines.
<meta charset="UTF-8">
<meta name="description" content="A brief description of the page">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">10. HTML Styles and Scripts
HTML allows for styling through the <style> tag for internal CSS or the <link> tag to include external stylesheets. JavaScript functionality is added using the <script> tag, which can be placed in the <head> or at the end of the <body> to enhance interactivity and dynamic behavior.
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
alert('Page is ready!');
});
</script>11. HTML Headings
Headings are used to define the structure and hierarchy of content on a webpage. HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the highest and <h6> the lowest. Headings improve readability and accessibility by organizing content into sections.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Another Subheading</h4>
<h5>Additional Subheading</h5>
<h6>Least Important Heading</h6>12. HTML Comments
Comments in HTML are used to add notes or explanations within the code. They are not displayed in the browser and are useful for documentation purposes or for temporarily disabling code. Comments are enclosed in <!-- and -->.
<!-- This is a comment -->
<p>This is a visible paragraph.</p>
<!--
This is a multi-line comment
that spans multiple lines.
-->13. HTML Iframes
The <iframe> element allows you to embed another HTML page within the current page. It is useful for displaying content from other sources, such as maps or external documents. The src attribute specifies the URL of the page to be embedded.
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>14. HTML Entities
HTML entities are used to display special characters that are reserved in HTML or not easily typed on a keyboard. They start with an ampersand (&) and end with a semicolon (;). For example, & represents an ampersand, and < represents a less-than sign.
<div>This is a <div> element.</div>15. HTML Data Attributes
Data attributes allow you to store custom data on HTML elements. They are added using the data- prefix followed by a name. These attributes are accessible through JavaScript and can be used to store additional information that does not affect the rendering of the page.
<div data-user-id="123" data-role="admin">User Profile</div>16. HTML Canvas
The <canvas> element provides a space on the page where you can draw graphics via JavaScript. It is used for rendering graphs, game graphics, or other visual images dynamically. The getContext() method is used to access the drawing functions.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 75);
</script>17. HTML Custom Data Attributes
Custom data attributes allow you to store extra information on HTML elements. These attributes use the data- prefix followed by a custom name. They can be useful for storing information that needs to be accessed by JavaScript but does not affect the HTML rendering.
<button data-action="save" data-id="456">Save</button>18. HTML Aria Attributes
ARIA (Accessible Rich Internet Applications) attributes enhance the accessibility of web content for users with disabilities. They provide additional information about the behavior and structure of elements. For example, aria-label can be used to provide an accessible name for elements.
<button aria-label="Close"></button>19. HTML Web Storage
Web Storage provides a way to store data on the client side using localStorage and sessionStorage. localStorage persists data across sessions, while sessionStorage only lasts for the duration of the page session. Both offer key-value storage for web applications.
<script>
// Storing data
localStorage.setItem('username', 'JohnDoe');
sessionStorage.setItem('sessionToken', 'abc123');
// Retrieving data
var username = localStorage.getItem('username');
var token = sessionStorage.getItem('sessionToken');
</script>