Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly Media, Inc. HTML5 Pocket Reference, the image of. If you need all the basic tags ready for reference related to 'embed attributes', ' HTML5 New Tags', and 'Collective Character Objects', then the. This document is an Editors Draft of the “HTML5 Reference” produced by the HTML Working Group, part of the HTML Activity. The working group is working on .
|Language:||English, Spanish, Dutch|
|Genre:||Children & Youth|
|Distribution:||Free* [*Registration needed]|
The important thing to understand is that there are some differences in the way documents are visually rendered in each of the modes; and to ensure the most standards compliant rendering, it is important to ensure no-quirks mode is used.
Each is represented syntactically by a tag. While the types have some similarities to each other, they are distinguished by their syntactic requirements for their content models and the types of tags that may be used. A start tag marks the beginning of an element, while an end tag marks the end. Start tags are delimited using angle brackets with the tag name and any attributes in between. End tags are delimited by angle brackets with a slash before the tag name.
Example: The markup for the start and end tags of the p element. These indicate that the element is to be closed immediately, and has no content. Where this syntax is permitted and used, the end tag must be omitted. In HTML, the use of this syntax is restricted to void elements and foreign elements.
If it is used for other elements, it is treated as a start tag.
But note that it is only conforming for elements with content models that permit them to be empty. Example: A br element using the self-closing tag syntax. It is conventional to use their canonical case, but this is not required. For example, they could be written in all uppercase or mixed case, depending on your own preferences.
Refer to the definition of each element if in doubt. Some authors choose to include a space before the slash in the self-closing tag. This practice is based upon a convention that originated within the compatibility guidelines in XHTML 1. However, adherence to this convention is unnecessary. The permitted syntax of each element and its content model varies based on the type of element.
The term empty element is used to describe an element that contains no content. Elements of any type can be empty, depending on their content model. Heading content includes the header element and the h1 to h6 elements.
Phrasing content includes text and text-level markup. This is similar to the concept of inline level elements in HTML 4. Most elements that are categorised as phrasing content can only contain other phrasing content. Some common examples of phrasing content elements include abbr , em , strong and span. Embedded content includes elements that load external resources into the document. Such external resources include, for example, images, videos and Flash-based content. Some embedded content elements include img , object , embed and video.
Elements categorised as embedded content are considered to be phrasing content, and thus also considered to be flow content. Interactive elements are those that allow the user to interact with or activate in some way. Some common examples of interactive content include a , audio and video when used with the controls attribute, and most form controls using input.
Some elements have transparent content models, meaning that their allowed content depends upon the parent element. They may contain any content that their parent element may contain, in addition to any other allowances or exceptions described for the element.
When the element has no parent, then the content model defaults to flow content. Expect major changes to this section. Each of these needs longer descriptions and the elements should be divided into categories. The IDL for the DOM Interfaces is likely to be replaced by something a lot more reader-friendly in the future; consider it a placeholder for now. Attributes will likely be accompanied by brief descriptions within the summary box, in addition to fuller descriptions and examples afterwards.
The html element represents the root of an HTML document. The html element is the root element of a document. Every document must begin with this element, and it must contain both the head and body elements.
It is considered good practice to specify the primary language of the document on this element using the lang attribute. In the HTML syntax only, both the start and end tags are optional, and so for convenience either may be omitted, unless you wish to specify attributes on this element, in which case, at least the start tag needs to be included.
You may use either the lang or xml: Metadata is information about the document itself, such as it's title, author. Scripts and stylesheets may also be included within the head element. Every document must have a head element.
The base element is for specifying a base URL against which relative links will be resolved, and the name of the default target for opening links and form submissions. The link is for linking to other resources, such as stylesheets, favicons and syndication feeds. The LinkStyle interface must also be implemented by this element, the styling processing model defines how.
The body element represents the main content of the document. The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer. The nav element represents a section of a page containing primary navigation links to other pages or to parts within the page. The article element represents an independent section of a document, page, or site.
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content. The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
Such sections are often represented as sidebars in printed typography. The header element represents the header of a section, typically containing headings and subheadings, and other metadata about the section. The footer element represents a footer of a section, typically containing information such as who wrote it, links to related documents, and copyright notices.
The address element represents the contact information for the section it applies to. If it applies to the body element , then it instead applies to the document as a whole. A typical document is often structured into different sections and subsections, with each potentially having its own heading and possibly a subheading. These heading and sectioning elements provide a way for this structure to be conveyed to the reader.
The p element represents a paragraph. The hr element represents a paragraph -level thematic break, e. The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements. The dialog element represents a conversation. The blockquote element represents a section that is quoted from another source.
The ol element represents an ordered list. The ul element represents an unordered list. The dl element introduces an association list containing groups of terms and associated descriptions.
The dt element represents the term, or name, part of a term-description group in a description list dl element , and the talker, or speaker, part of a talker-discourse pair in a conversation dialog element.
The dd element represents the description, definition, or value, part of a term-description group in a description list dl element , and the discourse, or quote, part in a conversation dialog element. If the a element has an href attribute, then it represents a hyperlink. The Command interface must also be implemented by this element.
The q element represents a phrase quoted from another source. The cite element represents the title of a work, such as an article, a book, a poem, a song, a film, or any other creative work. The em element represents stress emphasis of its contents. The strong element represents strong importance for its contents.
The small element represents small print part of a document often describing legal restrictions, such as copyrights or other disadvantages , or other side comments. The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. The dfn element represents the defining instance of a term, where its definition is provided nearby. The abbr element represents an abbreviation or acronym, optionally with its expansion.
The progress element represents the completion progress of a task. The meter element represents a scalar measurement within a known range, or a fractional value. The code element represents a fragment of computer code.
The var element represents a variable, such as in a mathematical expression or programming context, or it could just be a term used as a placeholder in prose. The samp element represents sample output from a program or computing system. The kbd element represents user input typically keyboard input, although it may also be used to represent other input, such as voice commands. The sup element represents a superscript and the sub element represents a subscript.
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.
The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened. The bdo element allows authors to override the Unicode bidi algorithm by explicitly specifying a direction override.
The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronounciation or to include other annotations. In Japanese, this form of typography is also known as furigana. The rt element marks the ruby text component of a ruby annotation.
The ins element represents an addition to the document. The del element represents a removal from the document. The iframe element introduces a new nested browsing context. The embed element represents an integration point for an external typically non-HTML application or interactive content.
Depending on the type of content instantiated by the embed element, the node may also support other interfaces. The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context , or as an external resource to be processed by a plugin. Depending on the type of content instantiated by the object element, the node may also support other interfaces. The param element defines parameters for plugins invoked by object elements.
A video element represents a video or movie. An audio element represents a sound or audio stream. The source element allows authors to specify multiple media resources for media elements. The canvas element represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
The map element, in conjunction with any area element descendants, defines an image map. The area element represents either a hyperlink with some text and a corresponding area on an image map , or a dead area on an image map. The table element represents data with more than one dimension a table.
The caption element represents the title of the table that is its parent, if it has a parent and that is a table element. The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.
If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then the col element represents one or more columns in the column group represented by that colgroup. This interface defines one member, span.
The tbody element represents a block of rows that consist of a body of data for the parent table element, if the tbody element has a parent and it is a table. The thead element represents the block of rows that consist of the column labels headers for the parent table element, if the thead element has a parent and it is a table. The tfoot element represents the block of rows that consist of the column summaries footers for the parent table element, if the tfoot element has a parent and it is a table.
The tr element represents a row of cells in a table. The td element represents a data cell in a table. The th element represents a header cell in a table. The form element represents a collection of form-associated elements , some of which can represent editable values that can be submitted to a server for processing.
The fieldset element represents a set of form controls grouped under a common name. The label represents a caption in a user interface. The input element represents a typed data field, usually with a form control to allow the user to edit the data.
The button element represents a button. If the element is not disabled , then the user agent should allow the user to activate the button. The select element represents a control for selecting amongst a set of options. The datalist element represents a set of option elements that represent predefined options for other controls.
The contents of the element represents fallback content for legacy user agents, intermixed with option elements that represent the predefined options. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden. The optgroup element represents a group of option elements with a common label. The option element represents an option in a select element or as part of a list of suggestions in a datalist element.
The output element represents the result of a calculation. The details element represents additional information or controls which the user can obtain on demand. The command element represents a command that the user can invoke. The bb element represents a user agent command that the user can invoke. The menu element represents a list of commands. The div element represents nothing at all. These elements are obsolete and should not be used by authors. However, they are documented here because they are supported by browsers, along with notes about conforming alternatives that may be used instead.
Notes are used throughout this document to provide additional information. Tips are used to provide useful hints and suggestions. Warnings are used to point out common authoring errors and highlight important issues to be aware of. In some cases, the markup is the same and thus only one example is needed, but in others there may be differences syntactic differences.
Sometimes, erroneous examples are included. This is usually done to illustrate common authoring errors, bad practices and other issues to be cautious of. Unless explicitly stated otherwise for a specific purpose, all attribute values in examples are quoted using double quotes. In HTML, however, the trailing slash is optional and, unless explicitly stated otherwise, is always omitted. In such cases, the following prefixes are assumed to be defined even if there is no xmlns attributes in the fragment of code.
Start tag: Contained By: As the root element of a document. Wherever a subdocument fragment is allowed in a compound document. Content Model: A head element followed by a body element.
Attributes Global attributes manifest. HTML Example: As the first element in an html element.
One or more elements of metadata content , of which exactly one is a title element. Attributes Global attributes. Metadata content. In a head element containing no other title elements. In a head element containing no other base elements. Attributes Global attributes href target. Where metadata content is expected.
In a noscript element that is a child of a head element. Attributes Global attributes href rel media hreflang type sizes Also, the title attribute has special semantics on this element. If the charset attribute is present, or if the element is in the Encoding declaration state: If the http-equiv attribute is present, and the element is not in the Encoding declaration state: If the name attribute is present: Attributes Global attributes name http-equiv content charset.
If the scoped attribute is present: If the scoped attribute is absent: Depends on the value of the type attribute.
Attributes Global attributes media type scoped Also, the title attribute has special semantics on this element. Flow content. Phrasing content.
Where phrasing content is expected. If there is no src attribute, depends on the value of the type attribute. If there is a src attribute, the element must be either empty or contain only script documentation.
Attributes Global attributes src async defer type charset. In a head element of an HTML document , if there are no ancestor noscript elements. Where phrasing content is expected in HTML documents , if there are no ancestor noscript elements. When scripting is disabled , in a head element: When scripting is disabled , not in a head element: Sectioning root. As the second element in an html element. Attributes Global attributes onbeforeunload onerror onhashchange onload onmessage onoffline ononline onpopstate onresize onstorage onunload.
Sectioning content. Where flow content is expected. Heading content. Flow content , including at least one descendant that is heading content , but no sectioning content descendants, no header element descendants, and no footer element descendants. Flow content , but with no heading content descendants, no sectioning content descendants, and no footer element descendants. Flow content , but with no heading content descendants, no sectioning content descendants, no footer element descendants, and no address element descendants.
Zero or more pairs of one dt element followed by one dd element. Attributes Global attributes cite. Zero or more li elements.
Attributes Global attributes reversed start. Inside ol elements. Inside ul elements. Inside menu elements. Attributes Global attributes If the element is a child of an ol element: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.
Before dd or dt elements inside dl elements. Before a dd element inside a dialog element. After dt or dd elements inside dl elements. After a dt element inside a dialog element. Interactive content. When the element only contains phrasing content: Transparent , but there must be no interactive content descendant.
Attributes Global attributes href target ping rel media hreflang type. Phrasing content , but there must be no descendant dfn elements. Attributes Global attributes Also, the title attribute has special semantics on this element. Attributes Global attributes datetime. Attributes Global attributes value max. Attributes Global attributes value min low high max optimum. Attributes Global attributes Also, the dir global attribute has special semantics on this element.
One or more groups of: As a child of a ruby element. As a child of a ruby element, either immediately before or immediately after an rt element. If the rp element is immediately after an rt element that is immediately preceded by another rp element: Attributes Global attributes cite datetime. Flow content followed by one legend element. Embedded content. If the element has an usemap attribute: Where embedded content is expected. Attributes Global attributes alt src usemap ismap width height.
Text that conforms to the requirements given in the prose. Attributes Global attributes src name sandbox seamless width height. Attributes Global attributes src type width height Any other attribute that has no namespace see prose. Listed , submittable , form-associated element. Zero or more param elements, then, transparent. Attributes Global attributes data type name usemap form width height.
As a child of an object element, before any flow content. Attributes Global attributes name value. If the element has a controls attribute: If the element has a src attribute: If the element does not have a src attribute: Attributes Global attributes src poster autobuffer autoplay loop controls width height.
Attributes Global attributes src autobuffer autoplay loop controls. As a child of a media element , before any flow content. Attributes Global attributes src type media. Attributes Global attributes width height. Attributes Global attributes name. Where phrasing content is expected, but only if there is a map element ancestor.
Attributes Global attributes alt coords shape href target ping rel media hreflang type.