-
-
Save GabeStah/35df9cbbffcd1b0542d7 to your computer and use it in GitHub Desktop.
Coding Dojo - HTML5 Cheat Sheet - Full
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- DOCTYPE: http://www.w3.org/TR/html51/syntax.html#the-doctype --> | |
<!-- Language: http://www.w3.org/TR/html4/struct/dirlang.html --> | |
<html lang="en"> | |
<head> | |
<!-- Character Encoding: http://www.w3.org/TR/html-markup/syntax.html#character-encoding --> | |
<meta charset="UTF-8"> | |
<!-- Metadata: http://www.w3.org/TR/html5/document-metadata.html#the-meta-element | |
Any metadata you wish is valid. Note that Google and other search engines ignore | |
metadata 'keywords' as specified here in the HTML document. --> | |
<meta name="author" content="Book Dojo"> | |
<meta name="keywords" content="book,language,reading,author"> | |
<meta name="description" content="The Book Repository"> | |
<!-- Title: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-title-attribute --> | |
<title>The Book Repository | Book Dojo</title> | |
<!-- Stylesheet Linktypes: http://www.w3.org/TR/html5/links.html#link-type-stylesheet --> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
<!-- Conditional Comments: https://en.wikipedia.org/wiki/Conditional_comment | |
Using the same script in this example, but typically stylesheets would differ | |
based on the browser being served. --> | |
<!--[if !IE]><!--> | |
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> | |
<!--<![endif]--> | |
<!--[if IE 6]><!--> | |
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> | |
<!--<![endif]--> | |
<!-- Script: http://www.w3.org/TR/html5/scripting-1.html --> | |
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> | |
</head> | |
<body> | |
<header> | |
<h1>The Book Repository</h1> | |
<!-- http://www.w3.org/TR/html5/sections.html#the-nav-element | |
Code Source: http://www.getmdl.io/components/#menus-section --> | |
<nav> | |
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon"> | |
<i class="material-icons">more_vert</i> | |
</button> | |
<!-- Note: 'for' attribute is NOT technically valid HTML5 markup, | |
but is included simply to illustrate a working nav menu. --> | |
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left"> | |
<li class="mdl-menu__item">Home</li> | |
<li class="mdl-menu__item">Books</li> | |
<li class="mdl-menu__item">Authors</li> | |
<li class="mdl-menu__item">My Wishlist</li> | |
</ul> | |
</nav> | |
</header> | |
<!-- Headings & Sections: http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#headings-and-sections --> | |
<section> | |
<h2>Article List Heading</h2> | |
<article> | |
<h3>Article 1 Heading</h3> | |
<img src="https://pixabay.com/static/uploads/photo/2014/10/14/20/14/library-488677_960_720.jpg" alt="Look at my bookshelf!" height="192" width="250" /> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lacus ante.</p> | |
<section> | |
<h4>Article 1 Subsection Heading</h4> | |
<p>Praesent scelerisque arcu eu dui molestie tincidunt.</p> | |
</section> | |
</article> | |
<article> | |
<h3>Article 2 Heading</h3> | |
<img src="https://pixabay.com/static/uploads/photo/2015/12/05/16/07/book-1078365_960_720.jpg" alt="Old book is old" height="192" width="250" /> | |
<p>Curabitur ornare ex sit amet tortor rhoncus, sit amet imperdiet nisl posuere.</p> | |
<section> | |
<h4>Article 2 Subsection Heading</h4> | |
<p>Nam pretium ultrices mauris sit amet dignissim.</p> | |
</section> | |
</article> | |
</section> | |
<!-- Aside: http://www.w3.org/TR/html5/sections.html#the-aside-element --> | |
<aside> | |
<h3>Glossary of Terms</h3> | |
<!-- Description List: http://www.w3.org/TR/html-markup/dl.html#description-list --> | |
<dl> | |
<dt>Appendix</dt> | |
<dd>Supplementary material, typically located at the end of the book.</dd> | |
<dt>Errata</dt> | |
<dd>Mistakes or errors, typically noted by the publisher after initial publication.</dd> | |
<dt>Vellum</dt> | |
<dd>Parchment made from calf skin used for writing or printing on.</dd> | |
</dl> | |
</aside> | |
<!-- Footer: http://www.w3.org/TR/html5/sections.html#the-footer-element --> | |
<footer> | |
<span>©2015 Book Dojo</span> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you so much! This is very helpful! :)