HTML5 Cheat Sheet (All Tags & Attributes List)
HTML5 Cheat Sheet provides you with some quick accurate ready-to-use code snippets and necessary HTML tags and attributes. Table of Contents: Heading Tags. Container Tags. Document Section. HTML 5 has the capability to extend, rationalize, and even improve markup available for web documents. Moreover, it can handle complex web applications through new markups and by handling Application Programming Interfaces, commonly known as API. HTML 5 is also mobile-friendly; its features were designed with cross-platform integrations in mind.
HTML5 offers many more features and elements for building modern web applications. HTML 5 can help designers use cleaner markups that are consistent and uniform, create elegant forms, and work with rich media elements.
HTML5 Cheat Sheet with Examples (HTML5 Cheat Sheet 2024)
| Element / Attribute | Description / Usage | Example |
|---|---|---|
<!DOCTYPE html> |
Specifies the document type and version. | <!DOCTYPE html> |
<html lang="en"> |
Defines the root HTML element with language. | <html lang="en"> |
<head> |
Contains meta-information about the document. | <head><title>Page Title</title></head> |
<meta charset="UTF-8"> |
Sets character encoding. | <meta charset="UTF-8"> |
<meta name="viewport"...> |
Configures viewport for responsive design. | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<title> |
Sets the title displayed in the browser. | <title>Website Title</title> |
<body> |
Contains the visible content of the document. | <body>Content goes here</body> |
<header> |
Represents introductory content or navigation. | <header>Welcome to our Site</header> |
<nav> |
Defines navigation links. | <nav><a href="/">Home</a></nav> |
<main> |
Contains main content of the document. | <main><p>Main content here</p></main> |
<section> |
Represents a thematic grouping of content. | <section><h2>Section Title</h2></section> |
<article> |
Represents a self-contained content piece. | <article><p>Article content</p></article> |
<aside> |
Contains content related to the main content. | <aside><p>Additional info</p></aside> |
<footer> |
Defines the document’s footer. | <footer>© 2023 Your Company</footer> |
<strong> |
Renders text in bold for strong importance. | <p>This is <strong>important</strong> text.</p> |
<em> |
Renders text in italics for emphasis. | <p><em>Emphasized</em> text here.</p> |
<sup> |
Renders text as superscript. | <p>E=mc<sup>2</sup></p> |
<sub> |
Renders text as subscript. | <p>H<sub>2</sub>O</p> |
<a href="url"> |
Creates hyperlinks to other pages/resources. | <a href="https://www.example.com">Link</a> |
<img src="image.jpg"...> |
Embeds images with source and alt text. | <img src="image.jpg" alt="Description"> |
<ul> / <ol> |
Creates unordered / ordered lists. | <ul><li>Item 1</li><li>Item 2</li></ul> |
<li> |
Defines list items in ordered or unordered lists. | <li>List item</li> |
<form action="url"...> |
Creates a form with action and method. | <form action="submit.php" method="post"> |
<label for="id"> |
Associates a label with a form control. | <label for="username">Username:</label> |
<input type="text"...> |
Generates input fields with various types. | <input type="text" id="username" name="username"> |
<input type="submit"...> |
Adds a submit button to a form. | <input type="submit" value="Submit"> |
<audio controls> |
Embeds audio content with controls. | <audio controls><source src="audio.mp3" type="audio/mpeg"></audio> |
<video controls> |
Embeds video content with controls. | <video controls><source src="video.mp4" type="video/mp4"></video> |
Semantic Elements (e.g., <header>, <nav>) |
Adds structural and semantic meaning. | <header>Page Header</header> |
<!-- Comment --> |
Adds comments within the HTML code. | <!-- This is a comment --> |
You can download the HTML5 Cheat Sheet PDF using the link given below.
