Modern HTML Cheatsheet

HTML5 Cheatsheet

A comprehensive reference for all HTML elements

Document Structure

<html>

The root element of an HTML document.

<html lang=”en”></html>

<head>

Contains machine-readable information about the document.

<head><title>Page Title</title></head>

<body>

Represents the content of an HTML document.

<body>Content goes here</body>

Text Content

<h1> to <h6>

HTML section headings.

<h1>Main Heading</h1>
<h2>Subheading</h2>

<p>

Represents a paragraph.

<p>This is a paragraph.</p>

<span>

Generic inline container for phrasing content.

<span style=”color: red;”>Inline text</span>

<div>

Generic flow content container.

<div class=”container”>Content</div>

<ul> and <ol>

Unordered and ordered lists.

<ul>
 <li>Item 1</li>
</ul>

<li>

Represents an item in a list.

<li>List item</li>

Semantic HTML

<header>

Represents introductory content.

<header><h1>Website Title</h1></header>

<nav>

Represents navigation links.

<nav><a href=”/”>Home</a></nav>

<main>

Represents the dominant content of the body.

<main>Primary content</main>

<article>

Represents self-contained composition.

<article>Blog post</article>

<section>

Represents a standalone section.

<section>Content section</section>

<footer>

Represents a footer for its section.

<footer>Copyright info</footer>

Media Elements

<img>

Embeds an image into the document.

<img src=”image.jpg” alt=”Description”>

<audio>

Embeds sound content in a document.

<audio controls><source src=”audio.mp3″></audio>

<video>

Embeds a media player for video playback.

<video controls width=”250″>
 <source src=”video.mp4″>
</video>

<figure> and <figcaption>

Represents self-contained content with optional caption.

<figure>
 <img src=”image.jpg”>
 <figcaption>Caption</figcaption>
</figure>

Form Elements

<form>

Represents a document section with interactive controls.

<form action=”/submit” method=”post”></form>

<input>

Used to create interactive controls for forms.

<input type=”text” placeholder=”Enter text”>

<textarea>

Represents a multi-line plain-text editing control.

<textarea rows=”4″ cols=”50″></textarea>

<select> and <option>

Represents a control that provides a menu of options.

<select>
 <option value=”1″>Option 1</option>
</select>

<button>

Represents a clickable button.

<button type=”submit”>Submit</button>

<label>

Represents a caption for an item in a user interface.

<label for=”name”>Name:</label>
<input id=”name” type=”text”>

Modern HTML Cheatsheet – A comprehensive reference for web developers

×