HTML5 Cheat Sheet

In html

HTML5 is the latest version of the Hypertext Markup Language (HTML) used to create web pages. It is a markup language that is used to structure content on the web. HTML5 is designed to be more efficient, flexible, and user-friendly than its predecessors. It is also designed to be compatible with modern web browsers and mobile devices.

One of the most significant features of HTML5 is its ability to support multimedia content natively. This means that web developers can now embed audio and video files directly into their web pages without the need for third-party plugins like Adobe Flash. HTML5 also includes new elements and attributes that make it easier to create complex web applications.

Another important feature of HTML5 is its support for responsive web design. This means that web pages can now be designed to adapt to different screen sizes and resolutions, making them more accessible to users on mobile devices.

HTML5 also includes new APIs (Application Programming Interfaces) that allow web developers to create more interactive and engaging web applications. For example, the Geolocation API allows web applications to access a user’s location information, while the Web Storage API allows web applications to store data locally on a user’s device.

This cheat sheet provides an extensive list of HTML5 elements and attributes. The first column lists the element or attribute, and the second column provides a brief description.

Basic Structure

Element/AttributeDescription
<!DOCTYPE html>Defines the document type as HTML5
<html>Defines the root element of an HTML document
<head>Contains metadata about the document
<title>Defines the title of the document
<body>Contains the visible content of the document

Text Formatting

Element/AttributeDescription
<h1> to <h6>Defines headings of different levels
<p>Defines a paragraph
<br>Inserts a line break
<hr>Inserts a horizontal rule
<strong>Defines strong importance
<em>Defines emphasized text
<u>Defines underlined text
<s>Defines strikethrough text
<sup>Defines superscript text
<sub>Defines subscript text
<blockquote>Defines a block quotation
<q>Defines a short quotation
<cite>Defines the title of a work
<abbr>Defines an abbreviation
<address>Defines contact information
<pre>Defines preformatted text

Links and Images

Element/AttributeDescription
<a>Defines a hyperlink
hrefSpecifies the URL of the linked document
targetSpecifies where to open the linked document
<img>Defines an image
srcSpecifies the URL of the image
altSpecifies an alternate text for the image
widthSpecifies the width of the image
heightSpecifies the height of the image

Lists

Element/AttributeDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Defines a description in a description list

Tables

Element/AttributeDescription
<table>Defines a table
<tr>Defines a table row
<th>Defines a table header cell
<td>Defines a table data cell
colspanSpecifies the number of columns a cell should span
rowspanSpecifies the number of rows a cell should span

Forms

Element/AttributeDescription
<form>Defines a form
actionSpecifies where to send the form data
methodSpecifies the HTTP method to use
<input>Defines an input field
typeSpecifies the type of input field
nameSpecifies the name of the input field
valueSpecifies the value of the input field
<textarea>Defines a multiline input field
<select>Defines a dropdown list
<option>Defines an option in a dropdown list
selectedSpecifies that an option should be pre-selected
<button>Defines a clickable button
onclickSpecifies the JavaScript code to run when the button is clicked

Multimedia

Element/AttributeDescription
<audio>Defines an audio player
<source>Defines the audio source
srcSpecifies the URL of the audio file
typeSpecifies the MIME type of the audio file
<video>Defines a video player
<source>Defines the video source
srcSpecifies the URL of the video file
typeSpecifies the MIME type of the video file
controlsSpecifies that the video player should have controls

Semantic Elements

Element/AttributeDescription
<header>Defines a header for a document or section
<nav>Defines a navigation menu
<main>Defines the main content of a document
<article>Defines an article
<section>Defines a section
<aside>Defines content aside from the main content
<footer>Defines a footer for a document or section

Miscellaneous

Element/AttributeDescription
<div>Defines a generic container
classSpecifies one or more class names for an element
idSpecifies a unique id for an element
styleSpecifies inline CSS styles for an element
data-*Allows you to store custom data private to the page or application
aria-*Defines a set of accessibility attributes for an element

Conclusion

This HTML5 cheat sheet provides a comprehensive list of elements and attributes that you can use to create web pages. By using these elements and attributes, you can create web pages that are well-structured, semantically meaningful, and accessible to all users.

Reference:

https://developer.mozilla.org/en-US/docs/Glossary/HTML5

#