Tags examples
ð HTML Tags Cheat Sheet (Interactive)
Click the Example button to expand a preview + dark code block. Use Copy to copy code. This variant includes examples for the most useful tags only.
1. Document Structure & Metadata
| Tag | Description | Example |
|---|---|---|
| <!DOCTYPE> | Defines the document type | |
|
Standard HTML5 doctype declaration
<!DOCTYPE html>
| ||
| <html> | Defines the root of an HTML document | |
|
Root element with language attribute
<html lang="en">\n <head>...</head>\n <body>...</body>\n</html>
| ||
| <head> | Contains metadata/information | |
|
Head with meta and title
<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <title>Page Title</title>\n</head>
| ||
| <title> | Defines a title for the document | |
|
Shown in the browser tab
<title>My Blog Post</title>
| ||
| <meta> | Defines metadata about the HTML document | |
|
Description meta tag
<meta name="description" content="Short description of page">
| ||
| <link> | Defines relationship to external resource (e.g., CSS) | |
|
Linking external stylesheet
<link rel="stylesheet" href="styles.css">
| ||
| <script> | Defines a client-side script | |
|
Inline script example (defer recommended in head)
<script>console.log('hello world')</script>
| ||
2. Document Layout & Sections
| Tag | Description | Example |
|---|---|---|
| <body> | Defines the document’s body | |
|
Main content area
<body>\n <header>...</header>\n <main>...</main>\n</body>
| ||
| <header> | Defines a header for a document or section | |
|
Header with logo and nav
<header>\n <h1>Site Title</h1>\n</header>
| ||
| <nav> | Defines navigation links | |
|
Navigation example
<nav>\n <ul>\n <li><a href="#">Home</a></li>\n </ul>\n</nav>
| ||
| <main> | Specifies the main content | |
|
Main element example
<main>Primary content here</main>
| ||
| <section> | Defines a section in a document | |
|
Section with heading
<section>\n <h2>Topic</h2>\n</section>
| ||
| <article> | Defines an article | |
|
Article wrapper
<article>\n <h2>Article Title</h2>\n</article>
| ||
| <aside> | Defines content aside from the main content | |
|
Sidebar example
<aside>Related links</aside>
| ||
| <footer> | Defines a footer for a document or section | |
|
Footer example
<footer>\n <p>© 2025 My Site</p>\n</footer>
| ||
3. Text Content & Formatting
| Tag | Description | Example |
|---|---|---|
| <h1>–<h6> | Defines headings | |
Heading 1 preview<h1>Heading 1</h1>\n<h2>Heading 2</h2>
| ||
| <p> | Defines a paragraph | |
|
This is a paragraph example.
<p>This is a paragraph example.</p>
| ||
| <br> | Defines a single line break | |
|
Line1
Line2 <p>Line1<br>Line2</p>
| ||
| <pre> | Defines preformatted text | |
Preformatted\n text <pre>Preformatted\ntext</pre>
| ||
| <blockquote> | Quoted section from another source | |
|
A famous quote.
<blockquote>A famous quote.</blockquote>
| ||
| <q> | Defines a short quotation | |
|
Inline quote:
Quote here <p>He said <q>Hello</q></p>
| ||
| <code> <kbd> <samp> | Code snippets/keyboard/sample output | |
const x = 5; Ctrl+C<code>const x = 5;</code>\n<kbd>Ctrl+C</kbd>
| ||
| <strong> <em> | Important/emphasized text | |
|
Important and emphasized
<p><strong>Important</strong> and <em>emphasized</em></p>
| ||
4. Multimedia, Forms, Lists & Tables
| Tag | Description | Example | ||||
|---|---|---|---|---|---|---|
| <img> | Image | |||||
|
<img src="image.jpg" alt="Alt text" width="300">
| ||||||
| <picture> | Container for multiple image sources | |||||
|
Responsive image (uses srcset)
<picture>\n <source media="(min-width:800px)" srcset="large.jpg">\n <img src="small.jpg" alt="Responsive">\n</picture>
| ||||||
| <video> | Video content | |||||
|
<video controls width="320">\n <source src="movie.mp4" type="video/mp4">\n</video>
| ||||||
| <audio> | Sound content | |||||
|
<audio controls src="song.mp3"></audio>
| ||||||
| <form> | Form for user input | |||||
|
<form action="/submit" method="post">\n <label>Name <input name="name"></label>\n <button type="submit">Send</button>\n</form>
| ||||||
| <input> <textarea> | Input controls | |||||
|
<input type="email" name="email" placeholder="you@example.com">\n<textarea name="msg" rows="4"></textarea>
| ||||||
| <select> <option> | Dropdown list | |||||
|
<select>\n <option value="1">One</option>\n <option value="2">Two</option>\n</select>
| ||||||
| <table> <tr> <td> | Table structure | |||||
<table>\n <thead>...</thead>\n <tbody>...</tbody>\n</table>
| ||||||
| <ul> <ol> <li> | Lists | |||||
<ul>\n <li>First</li>\n <li>Second</li>\n</ul>
| ||||||
5. Interactive & Semantic Elements (selected)
| Tag | Description | Example |
|---|---|---|
| <details> | Expandable details element | |
SummaryMore details here. <details>\n <summary>Summary</summary>\n <p>Details here</p>\n</details>
| ||
| <dialog> | Dialog box or popup | |
|
<dialog id="d1">Hello</dialog>\ndocument.getElementById('d1').showModal();
| ||
| <figure> <figcaption> | Self-contained content with caption | |
|
<figure>\n <img src="..." alt="...">\n <figcaption>Caption</figcaption>\n</figure>
| ||
| <template> | Hidden template content | |
|
Template not rendered until used
<template id="tpl">\n <div>Card</div>\n</template>
| ||
Tip: If Blogger blocks the full widget, split into multiple widgets and paste each section separately (Document/Structure, Layout, Text, Media & Forms, Semantic).
Comments
Post a Comment