HTML5 is the latest evolution of the standard that defines HTML, a language used for structuring and presenting content on the web. This guide provides an extensive cheat sheet for HTML5, explaining various elements, their attributes, and usage. Whether you're a beginner or looking to refresh your knowledge, this guide covers the essential HTML5 tags and their functionalities.
Document Structure and Information
Document Declaration
<!DOCTYPE html>
The <!DOCTYPE html> declaration tells the browser to interpret the document as an HTML5 document.
HTML Element
<html lang="en"></html>
The <html> tag encloses all HTML content. The lang attribute specifies the language of the document, aiding search engines and browsers in displaying the content appropriately.
Head Element
<head></head>
The <head> element contains meta-information about the document, such as its title, character set, styles, scripts, and more.
Title Element
<title></title>
The <title> tag defines the title of the document, displayed on the browser's title bar or tab.
Body Element
<body></body>
The <body> tag contains the content of the document, visible to the user.
Base Element
<base/>
The <base> tag sets a base URL for all relative URLs in the document.
Style Element
<style></style>
The <style> tag contains CSS styles for the document.
Meta Element
<meta/>
The <meta> tag provides metadata about the document, such as its description, author, and character set.
Script Element
<script></script>
The <script> tag is used to include JavaScript code or external JavaScript files.
Link Element
<link/>
The <link> tag defines the relationship between the document and external resources, such as stylesheets.
Document Structure Elements
Headings
<h1></h1> ... <h6></h6>
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).
Paragraph
<p></p>
The <p> tag defines a paragraph of text.
Division
<div></div>
The <div> tag is a block-level container for grouping content.
Span
<span></span>
The <span> tag is an inline container used to group text for styling purposes.
Line Break
<br/>
The <br> tag inserts a line break.
Horizontal Rule
<hr>
The <hr> tag creates a thematic break or horizontal line.
Text Formatting Elements
Bold Text
<strong></strong> and <b></b>
The <strong> and <b> tags make text bold, with <strong> indicating strong importance.
Italic Text
<em></em> and <i></i>
The <em> and <i> tags make text italic, with <em> indicating emphasis.
Strikethrough Text
<del></del>
The <del> tag represents deleted or strikethrough text.
Preformatted Text
<pre></pre>
The <pre> tag displays preformatted text with fixed-width font and preserved whitespace.
Blockquote
<blockquote></blockquote>
The <blockquote> tag is used for long quotations, often with a citation.
Abbreviation
<abbr></abbr>
The <abbr> tag defines an abbreviation or acronym, with a full form available.
Address
<address></address>
The <address> tag displays contact information.
Inline Code
<code></code>
The <code> tag is used to display inline code snippets.
Short Quotation
<q></q>
The <q> tag defines a short inline quotation.
Subscript and Superscript
<sub></sub> and <sup></sup>
The <sub> tag defines subscripted text, while the <sup> tag defines superscripted text.
Keyboard Input
<kbd></kbd>
The <kbd> tag specifies keyboard input text.
Small Text
<small></small>
The <small> tag defines smaller text.
Inserted Text
<ins></ins>
The <ins> tag defines text that has been inserted into a document.
Links and Navigation
Anchor
<a href="url"></a>
The <a> tag creates a hyperlink to external or internal pages.
Email Link
<a href="mailto:email@example.com"></a>
The <a> tag with mailto: creates a link to an email address.
Document Element Link
<a href="name"></a>
The <a> tag with a name attribute links to a specific element in the document.
Internal Link
<a href="#name"></a>
The <a> tag with # creates an internal link to a specific section.
Phone Link
<a href="tel://####-####-##"></a>
The <a> tag with tel: creates a clickable phone number.
Image Elements
Image
<img src="url" alt="text">
The <img> tag displays images, with src specifying the image source and alt providing alternative text.
List Elements
Ordered List
<ol></ol>
The <ol> tag creates an ordered list with numbered items.
Unordered List
<ul></ul>
The <ul> tag creates an unordered list with bullet points.
List Item
<li></li>
The <li> tag defines a list item within ordered and unordered lists.
Description List
<dl></dl>
The <dl> tag defines a description list.
Term and Description
<dt></dt> and <dd></dd>
The <dt> tag defines a term, and the <dd> tag defines the description of the term.
Form Elements
Form
<form action="url"></form>
The <form> tag creates a form for user input, with action specifying where to send the form data.
Form Attributes
method="somefunction()": Specifies the HTTP method (GET, POST, etc.) to use when submitting the form.enctype="": Defines the encoding type for the form data.autocomplete="": Enables or disables autocomplete.novalidate: Prevents the form from being validated when submitted.accept-charset="": Specifies the character encodings accepted by the server.target="": Specifies where to display the response after form submission (e.g.,_blank,_self).
Fieldset and Legend
<fieldset disabled="disabled"></fieldset>
<legend></legend>
The <fieldset> tag groups related form elements, and the <legend> tag provides a caption for the fieldset.
Input Element
<input type="text/email/number/color/date">
The <input> tag defines various types of input fields, such as text, email, number, color, and date.
Input Attributes
name="": Specifies the name of the input field.width="": Defines the width of the input field.value="": Sets the default value of the input field.size="": Defines the width of the input field in characters.maxlength="": Specifies the maximum number of characters allowed.required="": Makes the input field mandatory.step="": Defines the legal number intervals for the input field.
Textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
The <textarea> tag defines a multi-line text input field.
Select Element
<select name=""></select>
The <select> tag creates a dropdown list.
Select Attributes
name="": Defines the name of the select element.size="": Specifies the number of visible options.multiple: Allows multiple selections.required: Makes a selection mandatory.autofocus: Automatically focuses the select element when the page loads.
Option Group and Option
<optgroup></optgroup>
<option value=""></option>
The <optgroup> tag groups related options within a dropdown list, and the <option> tag defines an individual option.
Button
<button></button>
The <button> tag creates a clickable button.
Table Elements
Table
<table></table>
The <table> tag defines a table.
Caption
<caption></caption>
The <caption> tag provides a title for the table.
Table Sections
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
The <thead> tag groups header content, <tbody> groups body content, and <tfoot> groups footer content.
Table Row and Cell
<tr></tr>
<th></th>
<td></td>
The
<tr> tag defines a table row, <th> defines a header cell, and <td> defines a data cell.
Column Group and Column
<colgroup></colgroup>
<col>
The <colgroup> tag groups columns for styling, and <col> defines individual columns.
Media and Embedded Content
Object
<object data=""></object>
The <object> tag embeds multimedia content, such as images, audio, video, and PDFs.
Object Attributes
type="": Specifies the media type.height="": Sets the height of the object.width="": Sets the width of the object.usemap="": Links to a client-side image map.
Iframe
<iframe src="" frameborder="0"></iframe>
The <iframe> tag embeds an external webpage within the current document.
Embed
<embed src="" type="">
The <embed> tag inserts external content, such as plugins.
HTML5 New Elements
Semantic Elements
<header></header>: Defines the header of a document or section.<footer></footer>: Defines the footer of a document or section.<main></main>: Defines the main content of a document.<article></article>: Defines an independent article.<aside></aside>: Defines content aside from the main content.<section></section>: Defines a section in a document.<details></details>: Contains additional details the user can view or hide.<dialog></dialog>: Defines a dialog box or window.<figure></figure>: Contains self-contained content like images or diagrams.<figcaption></figcaption>: Provides a caption for a figure.<mark></mark>: Highlights text.<nav></nav>: Defines navigation links.<menuitem></menuitem>: Defines a menu item in a popup menu.<meter></meter>: Displays a scalar measurement within a known range.<progress></progress>: Displays progress of a task.<rp></rp>: Provides fallback text for browsers that don't support ruby annotations.<rt></rt>: Defines the pronunciation of characters.<ruby></ruby>: Provides annotations for East Asian typography.<summary></summary>: Defines a summary heading for the<details>element.<bdi></bdi>: Isolates text for bidirectional text formatting.<time></time>: Defines a date and/or time.<wbr>: Defines a word break opportunity.
Canvas
<canvas></canvas>
The <canvas> tag is used to draw graphics via scripting (usually JavaScript).
Map
<map></map>
The <map> tag defines an image map with clickable areas.
Character Entities
"&": Quotation Marks - "&&&: Ampersand - &<&<: Less than sign - <>&>: Greater than sign - > & : Non-breaking space©&©: Copyright Symbol - ©@&Ü: @ symbol - @•&ö: Small bullet - .™&û: Trademark Symbol - ™
Understanding and utilizing these HTML5 elements and attributes will enable you to create well-structured, semantic, and accessible web pages. This cheat sheet serves as a quick reference to help you in your web development journey. Happy programming with sivabharathy.in!
