By Rob Gravelle
The W3C HTML5 specification introduces numerous new tags to define semantic/structural elements, text-formatting instructions, form controls, input types, and more. This page describes all of the new HTML5 tags along with updates to an existing tag.
Download PHP Cheat Sheet. The Ultimate HTML, CSS and PHP Cheat Sheet. Whether you’re a seasoned developer or just someone starting out coding, it’s great to have something you can always come back to for reference or simply refresh your memory. And as a gift to developers who juggle between HTML, CSS, and PHP, here is an ULTIMATE cheat. An easy-to-use HTML 5 cheat sheet for beginners – 2021 WPKube has prepared an extensive, up-to-date, ultimate cheat sheet on HTML 5— it includes all the tags listed in alphabetical order. We also included the availability of the tag from the previous HTML 4 version for comparison. On the other hand, this cheat sheet also includes a list of event. Continue Reading. Semantic HTML introduces us to,. Allows us to add videos to our website. Allows us to implement audio into our website. Can be used to implement any type of media. These elements are universal in that they all use the src attribute to link the source of the content. And requires a closing tag while is a self-closing tag.
- No Comments on HTML Inline text semantics Cheat Sheet The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
- HTML5 and elements. The tag specifies independent streaming content (images, charts, photos, codes, etc.). The content of the element should be related to the main content, but if it is deleted, it should not affect the document flow.
New Semantic/Structural Elements
HTML5 offers new semantic elements to define different parts of a web page:
<article>
A self-contained composition in a document that is independently distributable or reusable, e.g. a forum post, a magazine or newspaper article, or blog entry.
<aside>
Defines content tangentially related to the content surrounding it, such as related reading links and glossaries, which may or not be nested within an article element.
<figcaption>
Defines a caption for a <figure> element
<figure>
Used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code listings, etc.
<header>
Not be confused with the <head> element, the <header> tag typically contains the section?s heading (an h1?h6 element), as well as other content, such as a navigation links, table of contents, a search form, or any relevant logos.
<footer>
For content located at the very bottom of the web page or nearest section. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, etc. It in turn may contain entire sections, with appendices, indexes, license agreements, and other similar content.
<main>
Delineates the main content of the body of a document or web app. As such, the main content area holds content that is directly related to or expands upon the central topic of the page. Moreover, it helps screen readers and other assistive technologies understand where the main page content begins.
<mark>
Meant to bring the reader?s attention to a part of the text due to its contextual relevance.
<nav>
Denotes a section with navigation links, either to other pages or to parts within the same page.
<section>
Unlike the <div> tag, which is used for a myriad of purposes, not the least of which is formatting content, the <section> element demarcates a thematic grouping of content. Each section typically includes a heading element and associated content within DIVs and Paragraphs. Examples include introduction, blog entries, and contact information.
<details>
Produces an expandable box to display additional information. The expanding/collapsing behaviour does not depend on scripting, so it should work even if JavaScript is disabled or not supported.
<summary>
An optional element that summarizes the contents of the parent details element. As such, it may contain a description, caption, or legend.
<time>
Contains both human-friendly contents, along with a machine-readable form of those contents in the datetime attribute. The kinds of content range from various kinds of dates, to times, time-zone offsets, and durations.
Text-level Elements
<bdi>
Defines a part of text that might be formatted in a different direction from other text
<wbr>
Defines a possible line-break in text that is written as one long word.
New Form Elements
HTML5 introduces a number of new input types, attributes, and other elements to the HTML language.
<datalist>
Defines pre-defined options for input controls. It works in a similar way to an autocomplete textbox.
<keygen>
Defines a key-pair generator field (for forms). When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.
<output>
Defines the result of a calculation
<progress>
Presents a progress bar that tracks the progress of a task.
New Input Types
HTML5 introduced a number of new input types for forms to address specific behavioral and formatting requirements that were lacking for the HTML 4.01 spec. For instance, handling the inputting of dates, numbers, telephone numbers, etc.
New Input Types | New Input Attributes |
---|---|
|
|
More Relaxed Attribute Syntax
In HTML5, attribute values may be delimited by single or double quotes or, in the case of single word entries, without either. Attributes without a value (such as disabled) don't require an equals or quotes (=').
Graphic Elements
Defines graphic drawing using JavaScript Defines graphic drawing using SVG
See the following article for more information on the HTML5 canvas element and this article for more on the HTML5 svg element.
Media Elements
As the Internet becomes a more immersive multi-media experience, browsers are now equipped to handle many media types without the need for additional plugins. A prime example is the <embed> element that has to an explosion in YouTube video sharing.
<audio>
Defines sound or music content
<embed>
Html5 Semantic Tags Cheat Sheet Free
Defines containers for external applications (usually a video player)
<source>
Defines sources for <video> and <audio>
<track>
Html Cheat Sheet Download
Defines tracks for <video> and <audio>
<video>
Defines video or movie content
Html5 Semantic Tags Cheat Sheet
The HTML5 <!DOCTYPE> Declaration
The <!DOCTYPE> declaration is not an HTML tag per se, but rather an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration referred to a DTD, because HTML 4.01 was based on SGML. Since HTML5 is no longer based on SGML, Web documents do not require a reference to a DTD. The <!DOCTYPE> declaration must be on the very first line of your HTML document, before the opening <HTML> tag.
The following table compares some previous HTML 4.01 <!DOCTYPE> declarations to HTML5's single replacement:
<!DOCTYPE HTML> |
XHTML 2 is dead, long live HTML5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML5 instead. And even although HTML 5 won’t be completely supported until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.
So in the spirit of the upcoming change we decided to release a handy printable HTML5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML4.
Further Reading on SmashingMag:
Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status. We’ll do our best to update the cheat sheet when new changes will become known. The cheat sheet was created by our friends from Veign and released exclusively for the readers of Smashing Magazine.
Download the cheat sheet for free!
- preview (.gif, 1017×836px)
- download the pdf (76 Kb)
Thank you very much, Chris Hanscom! We appreciate your efforts.
Further Resources About HTML 5
- HTML5 Demos A couple of HTML 5 examples and experiments.
- HTML5 Doctor This blog publishes articles relating to HTML5 and it’s semantics and how to use them, here and now.
- HTML5 Gallery A showcase of sites using html5 markup.
Do you already use HTML5 in your projects? Would you recommend using HTML5? Let us know in the comments!