GarsGuide to HTML

GarsGuide to Hypertext Markup Language (HTML). Describes the main features and syntax of HTML. Guides you to the resources you need to create web pages using HTML.


HTML Introductions

Resources that give an introduction or overview of HTML.

HTML: Hypertext Markup Language
https://developer.mozilla.org/en-US/docs/Web/HTML

Brief introduction and overview of HTML from the Mozilla Developer Network (MDN).

HTML basics
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

Introduction to basic HTML syntax and coding from Mozilla Developer Network (MDN).

HTML Introduction
https://www.geeksforgeeks.org/html-introduction/

Introduction to HTML. Describes HTML and gives a quick overview of its main features.

HTML Introduction
https://www.w3schools.com/html/html_intro.asp

Introduction to HTML from W3Schools, part of their HTML tutorial.

Overview of HTML
https://web.dev/learn/html/overview/

Brief introduction to HTML. Covers each of the key HTML concepts with diagrams and explanations.

HTML Cheat Sheets

Quick reference guides to the main features and characteristics of HTML.

HTML 5 Cheat Sheet
https://makeawebsitehub.com/the-html-5-mega-cheat-sheet/

HTML cheat sheet summarizing HTML 5, HTML 4, older versions of HTML, and the differences between them. Also discusses HTML 5 browser support, event handler content attributes, and canvas constructs.

HTML Cheat Sheet
https://overapi.com/html

HTML 4 cheat sheet showing tags grouped by category, commonly used attributes, events, and entities. Has an extensive list of HTTP status messages.

HTML CheatSheet
https://htmlcheatsheet.com/

Interactive cheat sheet from HTML CSS JS. This cheat sheet allows you to test your HTML and CSS code right on the page.

HTML Cheat Sheet
https://websitesetup.org/html5-cheat-sheet/

HTML cheat sheets covering HTML 4 and 5. Can be downloaded in various formats including PDF and PNG.

HTML Reference Guides

Resources that organize and document HTML features and syntax via explanations, charts, and tables.

HTML Living Standard
https://html.spec.whatwg.org/

Official HTML 5 specification from WHATWG - The Web Hypertext Application Technology Working Group. This document defines the official syntax and semantics of the latest version of HTML 5.

HTML 4.01 Specification
https://www.w3.org/TR/html4/

This is the last official HTML 4 specification I could find. Published by W3C, the World Wide Web Consortium, this specification defines HTML 4.01. Although superseded by HTML 5, this specification may be useful for understanding websites that predate HTML 5.

HTML Reference
https://www.w3schools.com/tags/default.asp

HTML 5 reference guide from W3Schools. The opening page displays a list of all HTML 4 and 5 tags in alphabetical order. Also includes pages explaining other major HTML language features.

HTML reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference

Mozilla Developer Network (MDN) reference guide describing all elements, attributes, and global attributes of HTML.

HTML Tutorials

Step by step guides to the features and syntax of HTML.

Tutorials
https://www.w3.org/MarkUp/#tutorials

List of links to tutorials on various subtopics of HTML and XHTML provided by the W3C Working Group.

HTML Tutorial
https://www.w3schools.com/html/default.asp

HTML tutorial from W3Schools. Has chapters covering most aspects of HTML5.

HTML Tutorials
https://developer.mozilla.org/en-US/docs/Web/Tutorials#html_tutorials

HTML tutorials from the Mozilla Development Network. Includes links to introductory, intermediate, and advanced tutorials, as well as additional resources.

HTML Tutorial
https://www.tutorialrepublic.com/html-tutorial/

HTML tutorial from Tutorial Republic. Covers basic and advanced HTML. Includes explanations and tables exploring additional topics.

HTML Tools

Software tools (or collections of tools) to help you read, understand, and write HTML code and web pages.

Validators and tools
https://www.w3.org/developers/tools/

Tools from the W3C to check and validate your web pages. These tools can evaluate your code, hyperlinks, internationalization friendliness, or other aspects of your web pages.

Can I use
https://caniuse.com/?cats=HTML5&statuses=all

This tool provides browser support information showing which HTML features work on which desktop and mobile web browsers.

Try out some of Our Tools
https://www.w3docs.com/tool/

Collection of tools from W3docs. Tools include a password generator, HTML editor, HTML encoder, CSS maker, color tools, base 64 converter, and more.

HTML Elements

An HTML Element begins with a tag. This table shows all tags available in HTML 4 and 5 in alphabetical order by tag. It also includes the tag meaning, a description of the tag, and a list of non-deprecated attributes that can be used in an element beginning with this tag.

Note: Tags deprecated in HTML 5 are shown in Silver.

Tag Tag Meaning Tag Description Applicable Attributes (non-deprecated attributes only)
!--... --> Comment Comment  
!DOCTYPE Document Type Document type  
<a> Anchor Anchor (hyperlink) download, href, hreflang, media, referrerpolicy, rel, target, type
<abbr> Abbreviation Abbreviation or acronym  
<acronym> Acronym Acronym  
<address> Address Contact information for document author or owner  
<applet> Applet Embedded applet  
<area> Image Map Area Clickable area inside an image map alt, coords, download, href, hreflang, media, ping, referrerpolicy, rel, shape, target, type
<article> Article Independent, self-contained content  
<aside> Aside Content indirectly related to the document's main content  
<audio> Audio Embedded sound content autoplay, controls, crossorigin, loop, muted, preload, src
<b> Bold Bold text  
<base> Base URL Base URL for relative URLs in a document href, target
<basefont> Base Font Default color, size, and font for all text in a document  
<bdi> Bi-Directional Isolation Text that might be formatted in a different direction from surrounding text  
<bdo> Bi-Directional Override Overrides the current text direction dir
<big> Big Renders text one font size larger than surrounding text  
<blockquote> Block Quote Text that is quoted from another source cite
<body> Body Main content of an HTML page  
<br> Break Single line break  
<button> Button Clickable interactive element disabled, form, formaction, formenctype, formmethod; formnovalidate, formtarget, name, popovertarget, popovertargetaction, type, value
<canvas> Canvas Transparent container used to draw graphics on the fly height, width
<caption> Caption Title (or caption) of a table  
<center> Center Centers text  
<cite> Citation Title of a creative work  
<code> Code Text styled as computer code  
<col> Column Specifies properties for each column in a colgroup span
<colgroup> Column Group Groups columns of a table for formatting span
<data> Data Associates a machine-readable version of the content with the displayed content value
<datalist> Data List Lists options for an input control  
<dd> Description Detail Description to accompany the term in a description list  
<del> Deleted Delimits text that has been deleted from a document cite, datetime
<details> Details Delimits text that the user clicks to view or hide open
<dfn> Definition Specifies the term to be defined  
<dialog> Dialog Defines a dialog box or sub-window to be displayed open
<dir> Directory List of files in a directory  
<div> Division Generic section of a document  
<dl> Description List Container for the Description Term and the Description Detail  
<dt> Description Term The term or name to accompany the description in a description list  
<em> Emphasis Emphasized text  
<embed> Embedded Container for embedding external content height, src, type, width
<fieldset> Field Set Groups related elements in a form disabled, form, name
<figcaption> Figure Caption Caption for a figure element  
<figure> Figure Self-contained content with optional caption  
<font> Font Defines the typeface, size, and color of text  
<footer> Footer Section of a document intended for the bottom of a page  
<form> Form Document section containing interactive controls for user input accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, target
<frame> Frame Section of a window in which another HTML document can be displayed  
<frameset> Frame Set A container for frames  
<h1> Heading 1 Top level HTML heading  
<h2> Heading 2 Second level HTML heading  
<h3> Heading 3 Third level HTML heading  
<h4> Heading 4 Fourth level HTML heading  
<h5> Heading 5 Fifth level HTML heading  
<h6> Heading 6 Sixth level HTML heading  
<head> Head Contains information and metadata about the document  
<header> Header Container for introductory content or navigational aids  
<hgroup> Heading Group Groups headings and related content  
<hr> Horizontal Rule Horizontal line intended to signify a thematic change in content  
<html> HTML The root of an HTML document xmlns
<i> Italic Text that should be considered distinct from the surrounding text, typically italicized  
<iframe> Inline Frame Rectangular region of a document in which to display a separate document allow, allowfullscreen, height, loading, name, referrerpolicy, sandbox, src, srcdoc, width
<img> Image Rectangular region of a document in which to display a linked image alt, crossorigin, decoding, height, ismap, loading, referrerpolicy, sizes, src, srcset, usemap, width
<input> Input Interactive control where the user can enter data accept, alt, autocomplete, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, name, pattern, placeholder, popovertarget, popovertargetaction, readonly, required, size, src, step, type, value, width
<ins> Inserted Marks text that has been inserted cite; datetime
<kbd> Keyboard Marks text intended to be input from a keyboard or other text entry device  
<label> Label Caption for an input element for, form
<legend> Legend Caption for a Field Set  
<li> List Item Item in an ordered or unordered list value
<link> Link Defines the relationship between a document and an external resource as, crossorigin, disabled, href, hreflang, imagesizes, imagesrcset, integrity, media, referrerpolicy, rel, sizes, title, type
<main> Main Specifies the main content of a document  
<map> Image Map Defines an image map - an image with clickable areas name
<mark> Marked Marked or highlighted text  
<menu> Menu Unordered list of items  
<menuitem> Menu Item Item that the user can invoke from a popup menu  
<meta> Meta Data Section of a page intended to provide document metadata charset, content, http-equiv, name
<meter> Meter A static gauge displaying a value between a minimum and a maximum form, high, low, max, min, optimum, value
<nav> Navigation Section of a page intended to provide navigation links  
<noframes> No Frames Alternate text for browsers that do not support frames  
<noscript> No Script Alternate text for browsers that do not support scripts  
<object> Object Container for an external resource data, form, height, name, type, width
<ol> Ordered List Ordered list of items reversed, start, type
<optgroup> Option Group Groups related options in a select element (drop-down list) disabled, label
<option> Option Defines an option in a select element (drop-down list) disabled, label, selected, value
<output> Output Container for the results of a calculation for, form, name
<p> Paragraph Defines a paragraph  
<param> Parameter Defines parameters for an object  
<picture> Picture Container for alternative images for different browser viewports  
<pre> Preformatted Presents text exactly as written, preserving spaces and line breaks  
<progress> Progress Displays progress toward completion of some task max, value
<q> Quotation Intended to display a short quotation cite
<rp> Ruby Parenthesis Defines what to show in browsers that do not support ruby annotations  
<rt> Ruby Text Explanation or pronunciation of characters for East Asian typography  
<ruby> Ruby Small annotations indicating pronunciation or meaning of East Asian characters  
<s> Strikethrough Text that is no longer correct, displayed with a strikethrough  
<samp> Sample Output Sample output as from a computer program, typically displayed in monospace font  
<script> Script Indicates embedded client-side script async, crossorigin, defer, integrity, nomodule, referrerpolicy, src, type
<search> Search Container for search and filter-related elements  
<section> Section Generic section of a document  
<select> Selection Drop-down list of options autocomplete, disabled, form, multiple, name, required, size
<slot> Slot Placeholder in a document to be filled later name
<small> Small Text displayed one font size smaller  
<source> Source Specifies multiple media resources that the browser may choose from height, media, sizes, src, srcset, type, width
<span> Span Generic inline container used to group elements for styling purposes  
<strike> Strikethrough Text displayed with a strikethrough  
<strong> Strong Important text, typically displayed in bold  
<style> Style Style information for a document or part of a document media; type
<sub> Subscript Subscripted text  
<summary> Summary Summary, caption, or legend for a details element  
<sup> Superscript Superscripted text  
<svg> Scalable Vector Graphics Container for SVG graphics height, width
<table> Table Defines a table, an arrangement of data in rows and columns  
<tbody> Table Body Groups the body content in a table  
<td> Table Data Standard data cell in an HTML table colspan, headers, rowspan
<template> Template Container for HTML content, initially hidden, rendered later with JavaScript  
<textarea> Text Area Multiline text input control autocomplete, cols, dirname, disabled, form, maxlength, minlength, name, placeholder, readonly, required, rows, wrap
<tfoot> Table Footer Content to be shown at the bottom of a table  
<th> Table Header (Content) Header cell in an HTML table abbr, colspan, headers, rowspan, scope
<thead> Table Header (Group) Content to be shown at the top of a table  
<time> Time Specifies a human or machine-readable date or time datetime
<title> Title The name of the document, shown in the browser's title bar or the page's tab  
<tr> Table Row A row in an HTML table; contains th or td elements  
<track> Track Text intended to be visible when media is playing default, kind, label, src, srclang
<tt> Teletype Text Text presented as if displayed on a fixed-width display  
<u> Underline Text that should be styled differently from normal text, typically underlined  
<ul> Unordered List Unordered list of items, typically rendered as a bulleted list  
<var> Variable Variable name in a program or mathematical expression, typically displayed in italic  
<video> Video Rectangular region of a document in which to display a linked movie or video autoplay, controls, crossorigin, height, loop, muted, poster, preload, src, width
<wbr> Word Break Position within text where the browser may optionally add a line-break  

References:
Elements
Index of Elements
HTML elements reference
HTML Element Reference
HTML Elements

HTML Attributes

Resources that define, list, or explain how to use HTML attributes and global attributes, not including event attributes.

Attributes
https://html.spec.whatwg.org/#attributes-3

Table of HTML attributes from the WHATWG HTML Living Standard. It shows the attribute name, element(s) the attribute applies to, attribute description, and values this attribute can take. This table only includes attributes that are supported by the HTML 5 specification.

HTML attribute reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

List of HTML attributes in alphabetical order by attribute name from the Mozilla Developer Network (MDN). Each attribute name is a link to a detailed description of that attribute.

HTML Attribute Reference
https://www.w3schools.com/tags/ref_attributes.asp

List of HTML attributes provided by W3Schools showing the attributes in alphabetical order by attribute name. Also shows the element(s) the attribute can be used on. Each attribute name is a link to a more detailed description of the attribute. Each element name is also a link to a detailed description of that element.

HTML Attributes
https://www.w3schools.com/html/html_attributes.asp

Attributes tutorial from W3Schools, part of the larger W3Schools HTML 5 tutorial. Describes HTML attributes, illustrating their use with examples.

Global attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

List of HTML global attributes from the Mozilla Developer Network (MDN). Each global attribute name is a link to a more detailed description of that attribute. The attributes are listed in alphabetical order by attribute name.

HTML Global Attributes
https://www.w3schools.com/tags/ref_standardattributes.asp

List of HTML global attributes, part of the larger W3Schools HTML 5 reference guide. The list shows the attribute name and a description of the attribute. Each attribute name is a link to a more detailed description of that attribute.

HTML Global Attributes

HTML Global Attributes are attributes that may be used in any HTML element. For some elements they may make no sense or may have no effect, but they are still valid to use.

Attribute Name Attribute Description Notes
accesskey Space-separated list of characters to use as a shortcut key to activate or focus an element For more detail, see 'https://www.geeksforgeeks.org/html-accesskey-attribute/'
autocapitalize Specifies whether (and in what manner) input text is automatically capitalized.  
autofocus Specifies that this element should automatically get the focus when the page loads  
class Space-separated list of CSS classes for an element  
contenteditable Specifies whether the content of an element is editable by the user  
data-* Defines custom data attributes ignored by the browser but available for use via scripts  
dir Determines whether text direction for the element’s content is left-to-right or right-to-left  
draggable Specifies whether an element can be dragged Images and links are draggable by default
enterkeyhint Specifies the appearance of the enter key on a virtual keyboard  
hidden Specifies that an element should not be displayed by the browser  
id Unique identifier for an element  
inert Specifies that the browser should disregard user input events for an element  
inputmode Specifies which type of virtual keyboard to display when editing an element For more detail, see 'https://www.w3schools.com/tags/att_global_inputmode.asp'
itemid Global identifier for a microdata item  
itemprop Item properties of a microdata item Each Item Property consists of a name and value pair
itemref Space-separated list of element IDs associated with an item  
itemscope Defines the scope of associated metadata  
itemtype URL of the vocabulary used to define item properties  
lang Language used in the contents of an element  
nonce Number used once; used by Content Security Policy to determine whether a fetch is allowed to proceed  
part Space-separated list of names that allows CSS to select and style specific elements  
popover Specifies that an element is hidden until revealed by invoking it  
slot Assigns an element to the place reserved by a slot element  
spellcheck Specifies whether the contents of the element should be checked for spelling errors  
style Specifies inline CSS styling that should be applied to the element  
tabindex Specifies the order in which an element receives the focus when the tab button is used for navigating  
title Text to show when the mouse hovers over an element  
translate Specifies whether the contents of the element should be translated or not  

References:
Attributes
Global attributes
HTML Global Attributes

HTML Event Attributes

Resources that define, list, or explain how to use HTML events (event handler content attributes).

List of event handler content attributes
https://html.spec.whatwg.org/multipage/indices.html#ix-event-handlers

Table of HTML event handler content attributes from the WHATWG HTML Living Standard. It shows the attribute name, element(s) the attribute can be used on, attribute description, and values this attribute can take.

HTML Event Attributes
https://www.w3schools.com/tags/ref_eventattributes.asp

List of HTML event handler content attributes, part of the larger W3Schools HTML 5 reference guide. The list shows the attribute name, the value the attribute can take, and a brief description of the attribute. Each attribute name is a link to a more detailed description of that attribute.

Introduction to events
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Explanation of event handler attributes from the Mozilla Developer Network (MDN). Here, MDN explains when, how, and whether to use HTML event handler attributes.

HTML Entities

Resources that list or explain how to use HTML entities (names or numbers that represent characters).

HTML Entity List
https://www.freeformatter.com/html-entities.html

This page contains multiple tables of HTML entities showing the character appearance, entity name, entity number and description.

Named character references
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

List of character reference names (entities) supported by HTML. The list shows the entity name, Unicode value, and an image of the glyph. The image can be enlarged by hovering over the glyph. The entities are displayed in entity name order, in three parallel columns.

XML Entity Definitions for Characters (3rd Edition)
https://www.w3.org/2003/entities/2007doc/

Working draft from W3C defining sets of names of character entities. Each set name is a link to a separate table showing details about each entity in the set. Following these are appendices with additional tables of entity information.

Characters Ordered by Unicode
https://www.w3.org/2003/entities/2007doc/bycodes.html

Editor's draft from W3C showing character entities in Unicode value order. It shows the Unicode value, Unicode formal name, and a list of all entity names assigned to this character. The Unicode value is a link to the character image.

Characters Ordered by Entity Name
https://www.w3.org/2003/entities/2007doc/byalpha.html

Editor's draft from W3C showing character entities in Unicode name order. It shows the entity name, entity set, entity description, Unicode value, and Unicode formal name. The Unicode value is a link to the character image.

HTML Entities
https://www.w3schools.com/html/html_entities.asp

Tutorial from W3Schools describing HTML entities and how to use them, part of the larger W3Schools HTML 5 tutorial. This tutorial includes a table of common HTML entities, and also has a table explaining how to add diacritical marks to a letter.

HTML Date and Time Formats

These are the date and time formats to use as initial values, minimum values, and maximum values for HTML elements requiring date or time to be specified. This includes tags such as del, ins, and time, as well as the input tag where the input type is date, datetime-local, month, time, or week.

Format Type Format Meaning of Format Example Notes
Time hh:mm:ss.fff hh=Hour, mm=Minute, ss=Second, fff=Fraction of a Second 12:30:30.123 Seconds and fractions of seconds are optional
Date YYYY-MM-DD YYYY=Year, MM=Month, DD=Day 1999-12-31  
Month YYYY-MM YYYY=Year, MM=Month 1999-12  
Week YYYY-Www YYYY=Year, W=Literal “W”, ww=Week of the year 1999-W52 The week format is not supported in Firefox or Safari. A year has 53 weeks if the January 1 is a Thursday or if January 1 is a Wednesday and the year is a leap year
Local Date-Time YYYY-MM-DDThh:mm:ss.fff YYYY=Year, MM=Month, DD=Day, T=Literal “T”, hh=Hour, mm=Minute, ss=Second, fff=Fraction of a Second 1999-12-31T12:30:00.12 Seconds and fractions of seconds are optional
Global Date-Time YYYY-MM-DDThh:mm:ss.fff-zz:zz YYYY=Year, MM=Month, DD=Day, T=Literal “T”, hh=Hour, mm=Minute, ss=Second, fff=Fraction of a Second, zz:zz=Time zone adjustment 1999-12-31T12:30:00.12-06:00 Seconds and fractions of seconds are optional

References:
HTML Living Standard 2.3.5 Dates and times
HTML Living Standard 4.10.1.8 Date, time, and number formats
Date and time formats used in HTML

HTML Related Information

Supplemental information and additional resources related to HTML.

Media Types
https://www.iana.org/assignments/media-types/media-types.xhtml

Complete list of internet media types provided by IANA, the Internet Assigned Numbers Authority. These media types (formerly known as MIME types) are the values that must be specified for the 'type' attribute in certain HTML elements.

IANA Language Subtag Registry
https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

Complete list of 2-letter language codes provided by IANA, the Internet Assigned Numbers Authority. This list displays the language code, language description, date added, and supplementary information when necessary.

Language tags in HTML and XML
https://www.w3.org/International/articles/language-tags/index.en

Explanation and additional information about IANA language tags.

HTML Language Code Reference
https://www.w3schools.com/tags/ref_language_codes.asp

List of ISO 639-1 Language Codes from W3Schools. This table shows the Language Name and ISO Code for languages to be used as the values for the lang attribute of the < HTML > tag.

HTML ISO Country Codes Reference
https://www.w3schools.com/tags/ref_country_codes.asp

Table of ISO Country Codes provided by W3Schools. This table shows the Country Name and ISO Code for countries to be used as the second part of values for the lang attribute of the < HTML > tag.

HTTP Status Messages
https://www.w3schools.com/tags/ref_httpmessages.asp

Table of HTTP status messages provided by W3Schools. These are messages that might be returned when an error occurs. This table shows the message text followed by a description of the message.

HTTP Request Methods
https://www.w3schools.com/tags/ref_httpmethods.asp

Explanation of HTTP Request Methods from W3Schools. Contains an embedded table comparing GET and POST.

HTML Color Names
https://www.w3schools.com/colors/colors_names.asp

Chart of the 140 color names supported by all modern browsers. This chart shows the color appearance, color name, and hex RGB value for each of these colors. Click on the name of the color to work with shades and mixes of that color.

HTML Character Sets
https://www.w3schools.com/charsets/default.asp

Explanation of the HTML character sets by W3Schools. The following character sets are described on this page: ASCII, Windows-1252, ISO-8859-1, and Unicode UTF-8.

HTML < !DOCTYPE >
https://www.w3schools.com/tags/ref_html_dtd.asp

Chart from W3Schools showing which HTML elements are valid with which HTML document types.

ASCII table , ascii codes
https://theasciicode.com.ar/

Table showing ASCII codes, printable characters, and extended ASCII characters.