Full HTML 5 cheatsheet. Quick reference for sections and elements
summary, with short explanations and usage examples.
This is a table of all the elements of HTML 5, based in the summaries provided in the official HTML 5 W3C Recommendation.
Quick reference based in HTML5 Sections
The body element represents the content of the document.
<!DOCTYPE HTML> <html> <head> <title>Steve Hill's Home Page</title> </head> <body> <p>Hard Trance is My Life.</p> </body> </html>
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
<article> <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'"> <p>My fave Masif tee so far!</p> <footer>Posted 2 days ago</footer> </article> <article> <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt=""> <p>Happy 2nd birthday Masif Saturdays!!!</p> <footer>Posted 3 weeks ago</footer> </article>
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
<h1>Biography</h1> <section> <h1>The facts</h1> <p>1500+ shows, 14+ countries</p> </section> <section> <h1>2010/2011 figures per year</h1> <p>100+ shows, 8+ countries</p> </section>
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
<nav> <ul> <li><a href="/">Home</a> <li><a href="/biog.html">Bio</a> <li><a href="/discog.html">Discog</a> </ul> </nav>
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.
<h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>
h1–h6 A section heading
These elements represent headings for their sections.
<h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> <p>If you want to play on a stage, you should bring one.</p> <h2>Amplified Music</h2> <p>Amplifiers up to 300W or 90dB are welcome.</p>
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
<article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article>
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.
<article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article>
TEXT LEVEL SEMANTICS
Quick reference based in HTML 5 text level semantics.
||Visit my example page.|
||I must say I adore lemonade.|
||This tea is very hot.|
||These grapes are made into wine. Alcohol is addictive.|
|cite||Titles of works||
||The case Hugo v. Danielle is relevant here.|
||The judge said
You can drink water from the fish tankbut advised against it.
||The term organic food refers to food produced without synthetic chemicals.|
||Organic food in Ireland is certified by the IOFGA.|
||Available starting today! North Coast Organic Apple Cider|
|time||Machine-readable equivalent of date- or time-related data||
||Available starting on !|
||If there are n fruit in the bowl, at least n÷2 will be ripe.|
||The computer said Unknown error -3.|
||Hit F1 to continue.|
||Water is H2O.|
||The Hydrogen in heavy water is usually 2H.|
||Lemonade consists primarily of Citrus limon.|
||Take a lemon and squeeze it with a juicer.|
||The mixture of apple juice and eldeflower juice is very pleasant.|
||Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest.|
|ruby , rb, rp, rt, rtc||Ruby annotations||
|bdi||Text directionality isolation||
||The recommended restaurant is My Juice Café (At The Beach).|
|bdo||Text directionality formatting||
||The proposal is to write English, but in reverse order. “Juice” would become “<bdo dir=rtl>Juice</bdo>”|
||In French we call it sirop de sureau.|
||Simply Orange Juice Company
Apopka, FL 32703
|wbr||Line breaking opportunity||