HTML - Structuring Content
Uploaded by
stef.spidy664HTML - Structuring Content
Uploaded by
stef.spidy664HTML - Structuring Content
HTML Structure
An HTML document has a basic structure that includes essential tags to define the content of a
web page. Every HTML file starts with a <!DOCTYPE> declaration, followed by an <html> tag,
and inside it, there are two main sections: the <head> and the <body>.
html
CopyEdit
<!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>
<h1>Hello, World!</h1>
<p>Welcome to HTML Cheat Sheet</p>
</body>
</html>
● DOCTYPE: Declares the document type and version (HTML5).
● html: The root element of the HTML document.
● head: Contains meta-information (not displayed on the page) like the title, character set,
and links to CSS or JS files.
● body: Contains all the visible content on the web page, including text, images, and other
elements.
Basic Tags
1. Headings (<h1> to <h6>)
○ <h1> is the largest heading, while <h6> is the smallest.
html
CopyEdit
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
2. Paragraph (<p>)
○ Defines paragraphs.
html
CopyEdit
<p>This is a paragraph.</p>
3. Line Break (<br>)
○ Adds a line break (new line).
html
CopyEdit
<p>Line one.<br>Line two.</p>
4. Horizontal Rule (<hr>)
○ Adds a horizontal line to separate content.
html
CopyEdit
<hr />
Text Formatting Tags
1. Bold (<b>), Strong (<strong>)
○ <b> is for bold text; <strong> adds emphasis and indicates important text.
html
CopyEdit
<b>This text is bold.</b>
<strong>This text is strongly emphasized.</strong>
2. Italic (<i>), Emphasis (<em>)
○ <i> italicizes text, while <em> adds emphasis (usually italicized with semantic
importance).
html
CopyEdit
<i>This text is italicized.</i>
<em>This text is emphasized.</em>
3. Underline (<u>)
○ Underlines the text.
html
CopyEdit
<u>This text is underlined.</u>
4. Strikethrough (<s>)
○ Strikes through the text.
html
CopyEdit
<s>This text is struck through.</s>
Links and Anchor Tags
1. Hyperlinks (<a>)
○ Creates a hyperlink to other pages or locations.
html
CopyEdit
<a href="https://www.example.com">Visit Example</a>
2. Email Links
○ Creates a mailto link that opens the default email client.
html
CopyEdit
<a href="mailto:[email protected]">Send Email</a>
3. Anchor Links
○ Links to a specific section within the page using an ID.
html
CopyEdit
<a href="#section1">Go to Section 1</a>
<p id="section1">This is Section 1.</p>
Images
1. Image Tag (<img>)
○ Adds an image to the page. Requires the src and alt attributes.
html
CopyEdit
<img src="image.jpg" alt="Description of the image" />
● src: Specifies the image URL or path.
● alt: Provides alternative text if the image fails to load (important for accessibility).
2. Responsive Images (<img> + CSS)
○ Use the width attribute for responsive images.
html
CopyEdit
<img src="image.jpg" alt="Responsive Image" width="100%" />
Lists
1. Ordered List (<ol>)
○ Creates a numbered list.
html
CopyEdit
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
2. Unordered List (<ul>)
○ Creates a bullet-point list.
html
CopyEdit
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
3. Definition List (<dl>, <dt>, <dd>)
○ Lists terms and their definitions.
html
CopyEdit
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Tables
1. Basic Table Structure (<table>, <tr>, <td>, <th>)
○ Create tables using rows (<tr>), data cells (<td>), and header cells (<th>).
html
CopyEdit
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
2. Table Attributes:
○ Use attributes like border, cellpadding, and cellspacing to customize the
table.
html
CopyEdit
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>
Forms
1. Form Structure (<form>, <input>, <textarea>, <button>)
○ Forms collect user input and submit it to a server.
html
CopyEdit
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
2. Input Types:
○ <input type="text">: Single-line text input.
○ <input type="email">: Email input field.
○ <input type="password">: Password field (hidden characters).
○ <input type="submit">: Submit button.
3. Text Area:
○ Multi-line input.
html
CopyEdit
<textarea rows="5" cols="40" name="comment">Enter comment</textarea>
4. Checkbox and Radio Buttons:
○ <input type="checkbox">: Checkboxes allow multiple selections.
○ <input type="radio">: Radio buttons allow a single selection.
html
CopyEdit
<input type="checkbox" name="subscribe" /> Subscribe to newsletter
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
Semantic HTML Tags
Semantic tags clearly describe the content they contain, improving readability and SEO.
1. Header (<header>)
○ Defines the header section of a webpage.
html
CopyEdit
<header>
<h1>Website Title</h1>
</header>
2. Footer (<footer>)
○ Defines the footer section.
html
CopyEdit
<footer>
<p>Copyright 2025</p>
</footer>
3. Section (<section>)
○ Defines a section of the document.
html
CopyEdit
<section>
<h2>About Us</h2>
<p>Information about us.</p>
</section>
4. Article (<article>)
○ Defines an independent piece of content (like a blog post).
html
CopyEdit
<article>
<h2>Blog Post Title</h2>
<p>This is a blog post.</p>
</article>
5. Aside (<aside>)
○ Defines content related to the main content (like a sidebar).
html
CopyEdit
<aside>
<p>Related articles or advertisements.</p>
</aside>
Meta Tags
Meta tags contain information about the document, such as character set, viewport, and SEO
metadata.
1. Character Encoding:
○ Defines the character encoding of the document.
html
CopyEdit
<meta charset="UTF-8" />
2. Viewport Settings:
○ Controls the layout on mobile devices.
html
CopyEdit
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
3. Description for SEO:
○ Adds a description for search engines.
html
CopyEdit
<meta name="description" content="A brief description of the webpage."
/>
Media Elements
1. Image (<img>)
○ Embeds an image (as mentioned above).
2. Video (<video>)
○ Embeds a video.
html
CopyEdit
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
3. Audio (<audio>)
○ Embeds an audio file.
html
CopyEdit
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
Your browser does not support the audio tag.
</audio>
Comments
Use comments to leave notes in your code.
html
CopyEdit
<!-- This is a comment -->
This cheat sheet covers every essential concept in HTML, making it easy to reference during
development!
Yes, there are a few advanced HTML concepts and features I haven’t covered yet in the basic
cheat sheet. Below are additional topics that include more advanced features and modern
HTML5 elements that are helpful in building complex and feature-rich web applications:
Advanced HTML Concepts
1. HTML5 New Semantic Elements
○ HTML5 introduced several new semantic elements for better structure and SEO:
○ Main (<main>)
■ Defines the main content of the document. It is a container for the
dominant content of the <body>.
html
CopyEdit
<main>
<article>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</article>
</main>
○
○ Nav (<nav>)
■ Represents navigation links.
html
CopyEdit
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
○ Figure and Figcaption (<figure>, <figcaption>)
■ Used to group media (images, diagrams, etc.) with a caption.
html
CopyEdit
<figure>
<img src="image.jpg" alt="Image description" />
<figcaption>Caption for the image</figcaption>
</figure>
2. Canvas for Graphics (<canvas>)
○ The <canvas> element is used to draw 2D shapes and graphics (lines, circles,
etc.) via JavaScript.
html
CopyEdit
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>
3.
○ Useful for creating games, charts, or dynamic visuals.
3. SVG (Scalable Vector Graphics) (<svg>)
○ Unlike <canvas>, <svg> is used to define vector-based graphics directly within
the HTML file.
○ SVG graphics are scalable and lightweight, perfect for icons and diagrams.
4. Data Attributes (data-*)
○ Custom attributes that allow you to store extra information on HTML elements.
These attributes can be used in JavaScript for advanced interactions.
html
CopyEdit
<div data-user-id="12345" data-role="admin">John Doe</div>
<script>
var userId =
document.querySelector("div").getAttribute("data-user-id");
console.log(userId); // 12345
</script>
5. Forms and Input Validation in HTML5
○ HTML5 introduced new input types and form attributes for client-side validation:
■ Input Types: <input type="email">, <input type="url">,
<input type="tel">, <input type="range">, etc.
■ Pattern Attribute: Used for validating specific patterns using regular
expressions.
html
CopyEdit
<input type="email" placeholder="Enter your email" required />
<input type="url" placeholder="Enter website URL"
pattern="https?://.+" />
○
○ Datalist (<datalist>)
■ Provides a list of predefined options for an <input> field.
html
CopyEdit
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option>
</datalist>
6. Web Storage (LocalStorage and SessionStorage)
○ HTML5 introduced two ways to store data on the client side:
■ localStorage: Stores data with no expiration.
■ sessionStorage: Stores data for the duration of the session.
html
CopyEdit
<script>
// Store data
localStorage.setItem("username", "JohnDoe");
// Retrieve data
var name = localStorage.getItem("username");
console.log(name); // JohnDoe
</script>
7. Geolocation API
○ HTML5 provides access to the user's location using the
navigator.geolocation object.
html
CopyEdit
<script>
navigator.geolocation.getCurrentPosition(function (position) {
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);
});
</script>
8. Media Elements - Audio and Video API
○ Advanced control over audio and video using JavaScript.
html
CopyEdit
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<script>
var video = document.getElementById("myVideo");
video.play(); // Play the video using JavaScript
</script>
9. Progress Bar (<progress>)
○ Represents task progress or the completion of a process.
html
CopyEdit
<progress value="70" max="100">70%</progress>
10.Drag and Drop API
● HTML5 supports native drag-and-drop functionality.
html
CopyEdit
<div draggable="true" ondragstart="drag(event)" id="drag1">Drag
me!</div>
<script>
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
</script>
11.Web Workers
● HTML5 Web Workers provide background threads to execute JavaScript code in parallel
without blocking the main thread.
html
CopyEdit
if (window.Worker) {
var worker = new Worker("worker.js");
worker.postMessage("Hello Worker");
}
12.Details and Summary (<details>, <summary>)
● Used to create expandable/collapsible content.
html
CopyEdit
<details>
<summary>More Info</summary>
<p>This is the hidden content that is displayed when expanded.</p>
</details>
Other Advanced Concepts
Contenteditable Attribute
○ Makes an element editable by the user.
html
CopyEdit
<div contenteditable="true">Edit this text.</div>
Custom Elements (Web Components)
○ Custom HTML elements with encapsulated logic and styles.
html
CopyEdit
<my-element></my-element>
ARIA (Accessible Rich Internet Applications)
○ Provides a way to make web content more accessible to people with disabilities.
html
CopyEdit
<button aria-label="Close" role="button">X</button>
These advanced HTML topics are crucial when you're developing complex, interactive, and
responsive web applications. You can use these elements to enhance user experiences and
optimize performance for modern web applications. Let me know if you’d like to dive deeper into
any of these specific topics!
Let's dive deeper into even more advanced and less frequently discussed HTML topics that
you may find useful in certain cases, especially for modern, complex web development projects.
Advanced HTML Concepts (Deep Dive)
1. Custom Data Attributes with data-*
○ As mentioned before, you can create custom data attributes that can be
manipulated with JavaScript. These attributes can store any extra information
directly in HTML elements. However, it’s important to know some specific use
cases and how these can be leveraged for efficient data handling:
○ Example: Dynamically adding data attributes:
html
CopyEdit
<div id="myElement" data-role="user" data-user-id="001">John Doe</div>
<script>
var element = document.getElementById('myElement');
// Add or change a data attribute
element.setAttribute('data-status', 'active');
// Access the attribute's value
console.log(element.dataset.userId); // "001"
console.log(element.dataset.status); // "active"
</script>
○ This is extremely useful for working with dynamically generated content, such
as managing attributes in single-page applications (SPAs) or data-driven web
components.
2. Web Components
○ Web Components allow you to create reusable, encapsulated HTML elements
with custom behavior and styles. This includes Custom Elements, Shadow
DOM, and HTML Templates. These enable component-driven architecture,
which is critical for frameworks like Angular, React, or Vue.
○ Custom Elements:
■ You can define your own HTML elements using JavaScript.
html
CopyEdit
<script>
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = "<p>This is a custom element!</p>";
}
}
customElements.define('my-element', MyElement);
</script>
<my-element></my-element>
○ Shadow DOM:
■ Encapsulates the DOM and CSS so they don’t affect the rest of the
document.
html
CopyEdit
<script>
class ShadowElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style> p { color: blue; } </style>
<p>This is a shadow DOM element</p>`;
}
}
customElements.define('shadow-element', ShadowElement);
</script>
<shadow-element></shadow-element>
○ HTML Templates:
■ HTML <template> tag can hold HTML code that is not rendered until
explicitly cloned.
html
CopyEdit
<template id="myTemplate">
<p>This will only be displayed when cloned</p>
</template>
<script>
var template = document.getElementById('myTemplate');
var clone = document.importNode(template.content, true);
document.body.appendChild(clone);
</script>
○
3. HTML Imports (Deprecated, but useful to understand)
○ HTML Imports were once part of the Web Components specification and
allowed importing HTML documents into other HTML documents. It has been
deprecated, but understanding it is helpful for backward compatibility in some
projects.
html
CopyEdit
<link rel="import" href="/path/to/import.html" />
○ In modern development, modules in frameworks like React or Angular have
taken over this role.
4. Progressive Web Apps (PWA) and Service Workers
○ Service Workers are scripts that your browser runs in the background, separate
from the web page. They enable features like offline capabilities, background
sync, and push notifications.
html
CopyEdit
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function
(registration) {
console.log('Service Worker registered with scope:',
registration.scope);
});
}
</script>
Service Worker Example (sw.js):
javascript
CopyEdit
self.addEventListener('install', function (event) {
// Cache resources during the install phase
});
self.addEventListener('fetch', function (event) {
// Intercept network requests and serve cached content
});
○
○ This is a vital technology for Progressive Web Apps (PWAs), providing offline
support and making web apps behave like native apps.
5. Accessibility (ARIA - Accessible Rich Internet Applications)
○ ARIA attributes enhance HTML accessibility, especially for screen readers and
other assistive devices. When creating complex interfaces like menus, carousels,
or dialogs, ARIA attributes ensure these elements are navigable for everyone.
Role attribute: Defines the purpose of an element.
html
CopyEdit
<button role="button" aria-label="Close"
aria-pressed="false">X</button>
○
Live regions (aria-live): Notify assistive technologies of dynamic changes in content.
html
CopyEdit
<div aria-live="polite">This content is updated dynamically.</div>
○
ARIA States: Helps manage the state of interactive elements.
html
CopyEdit
<button aria-expanded="false" aria-controls="menu">Open Menu</button>
<div id="menu" aria-hidden="true">Menu Content</div>
6. WebSockets for Real-Time Communication
○ HTML5 introduced the WebSocket API, enabling two-way communication
between the browser and server without the need to refresh the page or use
polling.
javascript
CopyEdit
var socket = new WebSocket('ws://example.com/socketserver');
socket.onopen = function () {
socket.send('Hello Server');
};
socket.onmessage = function (event) {
console.log('Message from server ', event.data);
};
○ WebSockets are crucial in real-time applications like chat apps, stock tickers,
or multiplayer games.
7. Intersection Observer API
○ A browser API that allows you to watch for visibility changes of an element in
relation to the viewport. It’s especially useful for lazy-loading images or
triggering animations when elements come into view.
javascript
CopyEdit
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('Element is in view!');
}
});
});
observer.observe(document.querySelector('#targetElement'));
8. MutationObserver API
○ Allows you to monitor changes in the DOM (e.g., when elements are added,
removed, or modified).
javascript
CopyEdit
const targetNode = document.getElementById('myElement');
const config = { attributes: true, childList: true, subtree: true };
const callback = function (mutationsList) {
for (let mutation of mutationsList) {
console.log('Mutation observed: ', mutation);
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
○ Useful for dynamically responding to DOM changes without constantly checking
the DOM in intervals.
9. Responsive Images (<picture> and srcset)
○ Use different images for different devices or resolutions using the <picture>
element or srcset attribute for responsive image loading.
html
CopyEdit
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="Sample image">
</picture>
○ The srcset attribute also works directly on an <img> tag to define multiple
resolutions:
html
CopyEdit
<img src="small.jpg" srcset="medium.jpg 2x, large.jpg 3x"
alt="Responsive image">
10.Content Security Policy (CSP)
● CSP is a security feature that helps prevent Cross-Site Scripting (XSS) attacks by
restricting where resources (like scripts, styles, or images) can be loaded from.
html
CopyEdit
<meta http-equiv="Content-Security-Policy" content="default-src
'self'; script-src 'self' https://trusted.com">
