HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content, making it readable and organized for browsers to display. It is essential because it forms the foundation of all websites.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>An HTML tag is the text inside angle brackets (e.g., <h1>), while an HTML element consists of the opening tag, content, and closing tag (e.g., <h1>Hello</h1>).
The <!DOCTYPE html> declaration tells the browser that the document is an HTML5 document. It helps ensure that the HTML file is interpreted correctly.
Semantic tags (e.g., <header>, <footer>, <article>, <section>) clearly describe their purpose and content, helping with accessibility and SEO.
Example:
<article>
<h2>News Article</h2>
<p>This is an article section.</p>
</article>
Inline elements (e.g., <span>, <a>) only take up as much space as needed, while block elements (e.g., <div>, <p>) occupy the full width available.
Example:
<p>This is a <span>span element</span> within a paragraph.</p>Use the <a> tag with the href attribute.
Example:
<a href="https://www.example.com">Visit Example</a>The <img> tag embeds an image. Common attributes include src (source of the image) and alt (alternative text for accessibility).
Example:
<img src="image.jpg" alt="Sample Image" width="200" height="100">Use the <ol> tag for ordered lists and <ul> for unordered lists. Each item goes within <li> tags.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>The alt attribute provides alternative text if an image fails to load and improves accessibility by describing the image content to screen readers.
Use the <video> tag with src, controls, and optional autoplay or loop attributes.
Example:
<video src="video.mp4" controls width="300"></video>The id attribute is unique and used for one element, while class can be used multiple times across elements.
Example:
<div id="uniqueDiv">Unique Div</div>
<div class="sharedClass">Div with shared class</div>Use <table>, <tr> for rows, <td> for data cells, and <th> for header cells.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>The <form> tag collects user input. It can have various controls like text fields, checkboxes, and submit buttons.
Example:
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>Use <!-- Comment goes here -->. Comments are not displayed in the browser.
<input> is a versatile form element. Types include text, checkbox, radio, password, and submit.
Example:
<input type="text" name="username">
<input type="checkbox" name="subscribe">
<input type="radio" name="gender" value="male">The <meta> tag provides metadata (e.g., character set, description) about the HTML document for SEO and browser handling.
Example:
<meta charset="UTF-8">
<meta name="description" content="Sample Page"><div> is a block-level container that groups content for styling or layout purposes.
Attributes provide additional information about an element (e.g., href in <a> or src in <img>).
The <link> tag links external resources, often used for stylesheets (rel="stylesheet").
Example:
<link rel="stylesheet" href="style.css">The viewport is the user-visible area of a web page. Setting the <meta name="viewport"> helps make sites responsive on mobile devices.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">XHTML (Extensible HyperText Markup Language) is a stricter version of HTML that follows XML syntax rules. XHTML requires tags to be properly closed, lowercase, and well-formed, while HTML is more lenient.
Example: in HTML
<img src="image.jpg">in XHTML:
<img src="image.jpg" />data-* attributes store custom data in HTML elements, which can be accessed via JavaScript for dynamic content manipulation.
Example:
<div data-user-id="123" data-role="admin">User</div>
<script>
const userId = document.querySelector('div').dataset.userId;
</script>srcset allows you to specify different image sources for different screen resolutions, improving responsiveness and performance.
Example:
<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" alt="Responsive Image">The preload link relation loads specific resources (e.g., fonts, images) early to improve performance and load time.
Example:
<link rel="preload" href="style.css" as="style">Set the tabindex attribute on an element to make it focusable with tab navigation.
Example:
<div tabindex="0">Focusable Div</div><section> groups related content, <article> contains self-contained content that could stand alone (like a blog post), and <aside> holds supplementary information, such as sidebars.
The <picture> element allows you to define multiple image sources for different screen conditions. It is useful for responsive images.
Example:
<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>Custom elements are user-defined HTML tags created with JavaScript. They allow developers to define reusable components.
Example:
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = '<p>Custom Element Content</p>';
}
}
customElements.define('my-element', MyElement);HTML:
<my-element></my-element>ARIA (Accessible Rich Internet Applications) provides roles and attributes like aria-label, role, and aria-live to make dynamic content accessible to screen readers.
Example:
<button aria-label="Close">X</button>defer delays script execution until the HTML document is fully parsed, improving page load performance.
Example:
<script src="script.js" defer></script><fieldset> groups related form elements, and <legend> provides a caption for the fieldset, improving accessibility and form organization.
Example:
<fieldset>
<legend>Personal Information</legend>
<label>Name: <input type="text"></label>
</fieldset>contenteditable makes an element editable in the browser, allowing users to modify text directly.
Example:
<div contenteditable="true">Edit this text</div>pattern enforces a specific regex pattern for input validation, ensuring user input matches the required format.
Example:
<input type="text" pattern="[A-Za-z]{3,}" title="Three or more letters only">autofocus automatically places the cursor in a specific form element when the page loads.
Example:
<input type="text" autofocus>spellcheck enables or disables spell checking on editable elements or text areas.
Example:
<textarea spellcheck="true"></textarea>SVG (Scalable Vector Graphics) can be embedded inline with the <svg> tag or as an external file using the <img> or <object> tags.
Example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" fill="red"/>
</svg>async loads the script asynchronously and executes it immediately after loading, while defer loads and executes the script after the HTML document is parsed.
This attribute prevents the new page from accessing the window.opener object, improving security and performance, especially when opening links in new tabs.
Example:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Link</a><details> provides a collapsible section for content, often paired with the <summary> element as the clickable title.
Example:
<details>
<summary>More info</summary>
<p>Additional information...</p>
</details>Media queries apply CSS styles conditionally based on device characteristics (e.g., width, height, orientation). This is essential for responsive design.
Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
The <template> element holds HTML content that is not rendered in the DOM until it’s activated via JavaScript, allowing for reusable HTML fragments. The <slot> element is used within Web Components to create placeholders for content passed from the parent scope, enabling customization of component content.
Example:
<template id="my-template">
<div>Template content here</div>
</template>Shadow DOM is a part of Web Components that encapsulates a component’s HTML structure, styles, and behavior, isolating it from the main DOM. It prevents style leakage and makes reusable, self-contained components.
Example:
const shadow = document.querySelector('#my-element').attachShadow({ mode: 'open' });
shadow.innerHTML = `<p>Shadow DOM content</p>`;CSP is an HTTP header that restricts resources like scripts, images, and styles to specific sources, preventing attacks such as Cross-Site Scripting (XSS) by controlling which resources can be loaded.
Example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com"><iframe> embeds another HTML page, <embed> is used for multimedia like videos, and <object> embeds external resources and can represent documents, images, and multimedia with more customization.
Service Workers are scripts that run in the background, handling caching, offline access, and background synchronization, significantly enhancing web app performance and reliability. They don’t directly affect HTML but can cache and serve HTML resources.
Example:
navigator.serviceWorker.register('/service-worker.js');WebAssembly (Wasm) is a binary format that enables high-performance code (like C/C++/Rust) to run in the browser alongside HTML and JavaScript, enhancing performance for resource-intensive applications.
Use ARIA roles (e.g., role="button") and states (e.g., aria-expanded, aria-hidden) to make interactive elements accessible to screen readers and ensure they respond correctly to user interaction.
Example:
<button aria-expanded="false" aria-controls="details" id="toggleButton">More Info</button>
<div id="details" aria-hidden="true">Detailed content here.</div>viewport-fit=cover in the meta viewport tag allows content to extend into the device’s full screen, especially on devices with notch displays, optimizing the use of screen space.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
The is attribute extends existing elements to create custom elements without entirely replacing native behavior, useful for applying custom behaviors on native elements like <button is="custom-button">.
SSR generates HTML on the server, delivering fully-rendered pages to clients, which improves load time, SEO, and performance on slower devices. It’s often used with JavaScript frameworks like React, Vue, and Next.js.
CSP level 3 introduces new directives (like script-src-elem and script-src-attr) and allows control over inline styles and scripts, providing more granular security for modern web applications compared to CSP level 2.
The fetch API retrieves resources asynchronously. Advanced use cases include handling authentication tokens, streaming responses, and intercepting requests with Service Workers.
Progressive enhancement builds functionality on a solid HTML foundation, ensuring basic content and functionality work across all devices, while enhancements (JavaScript, CSS) improve the experience on capable devices.
<input type="file" multiple> allows users to upload multiple files. Security considerations include sanitizing filenames, setting size limits, and validating file types to prevent malicious uploads.
Example:
<input type="file" multiple>preconnect establishes early connections to external resources (e.g., fonts, scripts) to reduce latency and improve performance, ideal for resources hosted on different domains.
Example:
<link rel="preconnect" href="https://fonts.googleapis.com">sendBeacon allows sending data to a server asynchronously, especially suited for logging and analytics, without blocking page unload events.
Example:
navigator.sendBeacon('/log', JSON.stringify({event: 'page_unload'}));HTTP/3, based on the QUIC protocol, improves load time by reducing connection setup latency and supporting multiplexing over a single connection. This means HTML resources can be fetched faster, improving overall performance.
<dialog> creates accessible, modal-like interfaces natively in HTML. The show() and close() methods control its visibility, and the open attribute makes it visible to users.
Example:
<dialog id="myDialog">This is a dialog</dialog>
<script>document.getElementById('myDialog').show();</script>
Permissions Policy (formerly Feature Policy) controls access to browser features (like geolocation, camera) on a per-origin basis, enhancing security and privacy.
Example:
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=()">