HTML (HyperText Markup Language) is a cornerstone of web development. Understanding its tags, attributes, and elements is crucial for building structured and accessible websites. This HTML cheat sheet covers both basic and advanced HTML concepts, providing examples to illustrate how they work.
1. Basic Structure of HTML
The foundational structure of an HTML document ensures that browsers interpret the webpage correctly. Below are key elements used to define an HTML page's basic layout.
| Name | Description | Attributes | Example |
|---|---|---|---|
<!DOCTYPE> | Declares the document type. | - | <!DOCTYPE html> |
<html> | The root element of an HTML document. | lang | <html lang="en"> ... </html> |
<head> | Contains metadata (information about the document). | - | <head> ... </head> |
<meta> | Provides metadata like character set and viewport. | charset, name, content | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<title> | Sets the title of the document (displayed in browser tab). | - | <title>Page Title</title> |
<body> | Contains the content of the webpage. | - | <body> ... </body> |
2. Text Formatting and Attributes
HTML offers a wide range of formatting tags and attributes that modify text display. Below are key tags used for headings, paragraphs, and text emphasis, along with their attributes.
| Name | Description | Attributes | Example |
|---|---|---|---|
<h1> to <h6> | Define headings from the largest to the smallest. | class, id | <h1 class="main-heading">Heading 1</h1> |
<p> | Defines a paragraph of text. | class, id | <p id="intro">This is a paragraph.</p> |
<span> | Inline container for text and other inline elements. | class, id | <span class="highlight">Highlighted text</span> |
<strong> | Semantically defines important text (bolded). | class | <strong>Important text</strong> |
<em> | Defines emphasized text (italicized). | class, id | <em>Emphasized text</em> |
<abbr> | Defines an abbreviation or acronym. | title | <abbr title="HyperText Markup Language">HTML</abbr> |
3. Links, Images, and Media
Links and media are essential components of any website, allowing users to navigate and interact with content. This section covers anchor links, images, and media embedding.
| Name | Description | Attributes | Example |
|---|---|---|---|
<a> | Defines a hyperlink. | href, target, rel, title | <a href="https://example.com" target="_blank">Visit Site</a> |
href | URL to navigate to when the link is clicked. | - | <a href="https://example.com">Link text</a> |
target | Specifies where to open the linked document. | _blank, _self | <a href="url" target="_blank">Open in new tab</a> |
<img> | Embeds an image. | src, alt, width, height | <img src="image.jpg" alt="Description" width="300" height="200"> |
<figure> | Groups content like images with captions. | - | <figure><img src="image.jpg"><figcaption>Caption text</figcaption></figure> |
<audio> | Embeds audio content. | controls, autoplay, src | <audio controls><source src="audio.mp3" type="audio/mpeg"></audio> |
<video> | Embeds video content. | controls, autoplay, width, height | <video controls width="400"><source src="video.mp4" type="video/mp4"></video> |
4. Lists: Ordered, Unordered, and Definition Lists
Lists help organize content, and HTML supports multiple types of lists such as ordered, unordered, and definition lists.
| Name | Description | Attributes | Example |
|---|---|---|---|
<ul> | Creates an unordered (bulleted) list. | class, id | <ul><li>Item 1</li><li>Item 2</li></ul> |
<ol> | Creates an ordered (numbered) list. | type, start | <ol start="3"><li>Item 3</li><li>Item 4</li></ol> |
<li> | Defines a list item. | value (for ordered lists) | <li>Item 1</li> |
<dl> | Creates a definition list (key-value pairs). | - | <dl><dt>Term</dt><dd>Description</dd></dl> |
<dt> | Defines the term in a definition list. | - | <dt>HTML</dt> |
<dd> | Describes the term in a definition list. | - | <dd>HyperText Markup Language</dd> |
5. Forms and Input Elements
Forms are the primary way to collect user data. HTML provides a wide range of form elements such as text fields, buttons, and checkboxes, along with attributes that define their behavior.
| Name | Description | Attributes | Example |
|---|---|---|---|
<form> | Defines a form for user input. | action, method, enctype | <form action="/submit" method="post"> ... </form> |
<input> | Defines various input fields for text, passwords, etc. | type, value, placeholder, required, name | <input type="text" name="username" required> |
<label> | Associates a label with an input field. | for | <label for="username">Username:</label><input id="username" type="text"> |
<textarea> | Creates a multi-line text input. | rows, cols, maxlength | <textarea rows="4" cols="50">Text here...</textarea> |
<select> | Creates a drop-down list. | name, multiple | <select><option>Option 1</option><option>Option 2</option></select> |
<button> | Creates a clickable button. | type, value | <button type="submit">Submit</button> |
6. Tables and Attributes
Tables are useful for displaying structured data in rows and columns. Here are key HTML table elements and attributes used to create organized data layouts.
| Name | Description | Attributes | Example |
|---|---|---|---|
<table> | Defines a table. | border, cellpadding, cellspacing | <table border="1"> ... </table> |
<tr> | Defines a row in a table. | class, id | <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td></tr> |
<th> | Defines a header cell in a table. | scope, colspan, rowspan | <th scope="col">Header</th> |
<td> | Defines a data cell in a table. | colspan, rowspan | <td colspan="2">Merged Cell</td> |
<caption> | Adds a title to the table. | - | <caption>Table Title</caption> |
7. Semantic HTML Elements
Semantic elements improve readability and accessibility by clearly defining the meaning of different sections of the webpage. Using these elements ensures a better structure for both users and search engines.
| Name | Description | Attributes | Example |
|---|---|---|---|
<header> | Represents the introductory content or a container for navigation links. | - | <header> ... </header> |
<footer> | Represents the footer section of a document, usually containing copyright info, links, etc. | - | <footer> ... </footer> |
<article> | Defines independent, self-contained content. | - | <article> ... </article> |
<section> | Defines a section of content, typically with a heading. | - | <section> ... </section> |
<aside> | Defines content aside from the main content (e.g., sidebars). | - | <aside>Sidebar content here</aside> |
<nav> | Represents a section containing navigation links. | - | <nav><a href="/home">Home</a></nav> |
8. Attributes for Global Use
Global attributes can be applied to any HTML element, providing additional functionality or behavior across elements.
| Name | Description | Values | Example |
|---|---|---|---|
class | Defines a class name for CSS styling and JS targeting. | Any valid class name | <p class="highlight">Text</p> |
id | Defines a unique identifier for an element. | Unique ID | <div id="main-content">Content here</div> |
style | Adds inline CSS styles to an element. | CSS rules | <h1 style="color: blue;">Heading</h1> |
title | Provides additional information on hover. | Text for hover tooltip | <img src="img.jpg" title="Image description"> |
data-* | Used to store custom data private to the page or application. | Any custom data value | <div data-user="John">User info</div> |
hidden | Hides an element from view. | Boolean | <p hidden>This won't be shown</p> |
tabindex | Specifies the tab order of an element. | Numeric value | <button tabindex="1">Click me</button> |
lang | Specifies the language of the element's content. | Language code (e.g., en, fr) | <html lang="en"> ... </html> |
9. Event Attributes
Event attributes define actions that are executed when certain events occur. These are commonly used in conjunction with JavaScript to add interactivity to your webpage.
| Name | Description | Values | Example |
|---|---|---|---|
onclick | Fires when an element is clicked. | JavaScript function or code | <button onclick="alert('Clicked!')">Click me</button> |
onmouseover | Fires when the mouse pointer hovers over an element. | JavaScript function or code | <p onmouseover="this.style.color='red';">Hover over me</p> |
onfocus | Fires when an element gains focus. | JavaScript function or code | <input type="text" onfocus="this.style.background='yellow';"> |
onblur | Fires when an element loses focus. | JavaScript function or code | <input type="text" onblur="this.style.background='white';"> |
onchange | Fires when the value of an input changes. | JavaScript function or code | <input type="text" onchange="alert('Value changed!');"> |
This HTML Cheat Sheet 2024 is designed to serve as a comprehensive reference for both new and experienced developers. It includes essential HTML tags, attributes, and other elements that are crucial for building functional and accessible websites. Mastering these elements will help you create well-structured, user-friendly web pages while adhering to modern web development standards.
