<!-- Font Awesome Icons -->
<!-- Lorem Ipsum Generator -->
<!-- Lorem Picsum -->
<!-- pexels.com -->
<!-- PIXLR -->
<!-- Photopia -->
<!-- Toptal -->
<!-- unsplash.com -->
<!-- W3C Markup Validation -->
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("main");
document.createElement("nav");
document.createElement("section");
</script>
<![endif]-->
<!-- --> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<address> Defines contact information for the author/owner of a document
<area> Defines an area inside an image-map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Defines a definition term
<dialog> Defines a dialog box or window
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text
<embed> Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header> Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<keygen> Defines a key-pair generator field (for forms)
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<main> Specifies the main content of a document
<map> Defines a client-side image-map
<mark> Defines marked/highlighted text
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source> Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
<u> Defines text that should be stylistically different from normal text
<ul> Defines an unordered list
<var> Defines a variable
<video> Defines a video or movie
<wbr> Defines a possible line-break
|
|
<html> Represents the root of an HTML or XHTML document. All other elements must be descendants of this element.
<head> Represents a collection of metadata about the document, including links to, or definitions of, scripts and style sheets.
<title> Defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.
<base> Defines the base URL for relative URLs in the page.
<link> Used to link JavaScript and external CSS with the current HTML document.
<meta> Defines metadata that can't be defined using another HTML element.
<style> Used to write inline CSS.
<script> Defines either an internal script or a link to an external script. The script language is JavaScript.
<noscript> Defines alternative content to display when the browser doesn't support scripting.
<template> This element has been added in HTML5 Container for client-side content instantiated during runtime using JavaScript.
<body> Represents the content of an HTML document. There is only one <body> element in a document.
<section> This element has been added in HTML5 Defines a section in a document.
<nav> This element has been added in HTML5 Defines a section that contains only navigation links.
<article> This element has been added in HTML5 Defines self-contained content that could exist independently of the rest of the content.
<aside> This element has been added in HTML5 Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Heading elements.
<header> This element has been added in HTML5 Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.
<footer> This element has been added in HTML5 Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.
<address> Defines a section containing contact information.
<main>This element has been added in HTML5 Defines the main or important content in the document. There is only one <main> element in the document.
<p> Defines a portion that should be displayed as a paragraph.
<hr> Represents a thematic break between paragraphs of a section or article or any longer content.
<pre> Indicates that its content is preformatted and that this format must be preserved.
<blockquote> Represents a content that is quoted from another source.
<ol> Defines an ordered list of items.
<ul> Defines an unordered list of items.
<li> Defines a item of an enumeration list.
<dl> Defines a definition list, that is, a list of terms and their associated definitions.
<dt> Represents a term defined by the next <dd>.
<dd> Represents the definition of the terms immediately listed before it.
<figure> This element has been added in HTML5 Represents a figure illustrated as part of the document.
<figcaption> This element has been added in HTML5 Represents the legend of a figure.
<div> Represents a generic container with no special meaning.
<a> Represents a hyperlink , linking to another resource.
<em> Represents emphasized text, like a stress accent.
<strong> Represents especially important text.
<small> Represents a side comment , that is, text like a disclaimer or a copyright, which is not essential to the comprehension of the document.
<s> Represents content that is no longer accurate or relevant.
<cite> Represents the title of a work.
<q> Represents an inline quotation.
<dfn> Represents a term whose definition is contained in its nearest ancestor content.
<abbr> Represents an abbreviation or an acronym ; the expansion of the abbreviation can be represented in the title attribute.
<data> This element has been added in HTML5. Associates to its content a machine-readable equivalent . (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).
<time> This element has been added in HTML5. Represents a date and time value; the machine-readable equivalent can be represented in the datetime attribute.
<code> Represents computer code.
<var> Represents a variable, that is, an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.
<samp> Represents the output of a program or a computer.
<kbd> Represents user input , often from the keyboard, but not necessarily; it may represent other input, like transcribed voice commands.
<sub>,<sup> Represent a subscript , or a superscript.
<i> Represents some text in an alternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought, or a ship name.
<b> Represents a text which to which attention is drawn for utilitarian purposes. It doesn't convey extra importance and doesn't imply an alternate voice.
<u> Represents a non-textual annoatation for which the conventional presentation is underlining, such labeling the text as being misspelt or labeling a proper name in Chinese text.
<mark> This element has been added in HTML5. Represents text highlighted for reference purposes, that is for its relevance in another context.
<ruby> This element has been added in HTML5. Represents content to be marked with ruby annotations , short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.
<rt> This element has been added in HTML5. Represents the text of a ruby annotation.
<rp> This element has been added in HTML5. Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
<bdi> This element has been added in HTML5. Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality.
<bdo> Represents the directionality of its children, in order to explicitly override the Unicode bidirectional algorithm.
<span> Represents text with no specific meaning. This has to be used when no other text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.
<br> Represents a line break.
<wbr> This element has been added in HTML5 Represents a line break opportunity , that is a suggested point for wrapping text in order to improve readability of text split on several lines.
<img> Represents an image.
<iframe> Represents a nested browsing context, that is an embedded HTML document.
<embed> This element has been added in HTML5. Represents a integration point for an external, often non-HTML, application or interactive content.
<object> Represents an external resource, which is treated as an image, an HTML sub-document, or an external resource to be processed by a plug-in.
<param> Defines parameters for use by plug-ins invoked by <object> elements.
<video> This element has been added in HTML5. Represents a video, and its associated audio files and captions, with the necessary interface to play it.
<audio> This element has been added in HTML5. Represents a sound, or an audio stream.
<source> This element has been added in HTML5. Allows authors to specify alternative media resources for media elements like <video> or <audio>.
<track> This element has been added in HTML5. Allows authors to specify timed text track for media elements like <video> or <audio>.
<canvas> This element has been added in HTML5. Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, or any visual images on the fly.
<map> In conjunction with <area>, defines an image map.
<area> In conjunction with <map>, defines an image map.
<svg> This element has been added in HTML5. Defines an embedded vectorial image.
<math> This element has been added in HTML5. Defines a mathematical formula.
<table> Represents data with more than one dimension.
<caption> Represents the title of a table.
<colgroup> Represents a set of one or more columns of a table.
<col> Represents a column of a table.
<tbody> Represents the block of rows that describes the concrete data of a table.
<thead> Represents the block of rows that describes the column labels of a table.
<tfoot> Represents the block of rows that describes the column summaries of a table.
<tr> Represents a row of cells in a table.
<td> Represents a data cell in a table.
<th> Represents a header cell in a table.
<form> Represents a form, consisting of controls, that can be submitted to a server for processing.
<fieldset> Represents a set of controls.
<legend> Represents the caption for a <fieldset>.
<label> Represents the caption of a form control.
<input> Represents a typed data field allowing the user to edit the data.
<button> Represents a button.
<select> Represents a control allowing selection among a set of options.
<datalist> This element has been added in HTML5. Represents a set of predefined options for other controls.
<optgroup> Represents a set of options, logically grouped.
<option> Represents an option in a <select> element, or a suggestion of a <datalist> element.
<textarea> Represents a multiline text edit control.
<keygen> This element has been added in HTML5. Represents a key-pair generator control.
<output> This element has been added in HTML5. Represents the result of a calculation.
<progress> This element has been added in HTML5. Represents the completion progress of a task.
<meter> This element has been added in HTML5. Represents a scalar measurement (or a fractional value), within a known range.
<details> This element has been added in HTML5. Represents a widget from which the user can obtain additional information or controls.
<summary> This element has been added in HTML5. Represents a summary, caption, or legend for a given <details>.
<menuitem> This element has been added in HTML5. Represents a command that the user can invoke.
<menu> This element has been added in HTML5. Represents a list of commands.
<header role="banner"> <!-- for site-wide headers -->
<nav role="navigation">
<main role="main">
<footer role="contentinfo">
<!DOCTYPE html>
<html lang="en">
<!-- comments can begin now -->
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<!-- <meta http-equiv="refresh" content="6; url=redirect.html"/> -->
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="robots" content="index,follow"/>
<title>Page Title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="myStyles.css"/>
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("main");
document.createElement("nav");
document.createElement("section");
</script>
<![endif]-->
OR
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<noscript>This page requires JavaScript!</noscript>
<header>
<h1 id="top">Heading</h1>
<p>Some text typed here.</p>
</header>
<nav>
<ul>
<li><a href="index.html" title="Return to the home page">Home Page</a></li>
<li>|</li>
<li><a href="page2.html" title="Go to another page">Another Page</a></li>
<li>|</li>
<li><a href="form.html" title="Fill out a form for more info">More
Info</a></li>
</ul>
</nav>
<main>
<section>
<h2>Section Title</h2>
<article>
<header>
<h3>Article Title</h3>
<p>(author, date)</p>
</header>
<p><span class="dropCaps">S</span>ome text here.</p>
<p>More and more text.</p>
</article>
<article>
<header>
<h3>Article Title</h3>
<p>(author, date)</p>
</header>
<p>More and more text.</p>
<p>Even more text text text</p>
</article>
</section>
<section>
<h2>Section Title</h2>
<article>
<header>
<h3>Article Title</h3>
<p>(author, date)</p>
</header>
<p><span class="drop-caps">S</span>ome text here.</p>
<p><span id="my-special-m">M</span>ore and more text.</p>
</article>
</section>
</main>
<aside>
<h2>Aside Title</h2>
<p>More text...(or nav)<p>
</aside>
<footer>
<p id="footer">Updated Dec 14, 2015. Contact <a href="mailto:someemail@yahoo.com"
title="someemail@yahoo.com">Somebody</a> for questions and suggestions.</p>
</footer>
<script src="scripts/index.js" defer></script>
</body>
</html>
<form action="/some-endpoint" method ="post">
<h1>Tell us about yourself</h1>
<fieldset name="contact-info">
<legend>Contact info</legend>
<label for="first-name">First name</label>
<input placeholder="Dweezil" type="text" name="first-name" id="first-name"/>
<label for="last-name">Last name</label>
<input type="text" name="last-name" id="last-name" placeholder="Zappa"/>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="foo@bar.com"/>
<label for="phone">Phone #</label>
<input type="tel" pattern="^[1-9]\d{2}-\d{3}-\d{4}" name="phone" id="phone" placeholder="888-888-8888" title="A typical U.S. phone number" required/>
</fieldset>
<label class="question" for="feelings">How do you feel?</label>
<select name="feelings" id="feelings" size="1" required>
<option value="">Great.</option>
<option value="1" selected>Pretty great.</option>
<option value="2">Definitely great.</option>
</select>
<fieldset>
<legend class="question">How do you really feel, though?</legend>
<input type="radio" name="feelings-2" id="ans-great-1" value="0" checked>
<label for="ans-great-1">Great.</label>
<br>
<input type="radio" name="feelings-2" id="ans-great-2" value="1">
<label for="ans-great-2">Seriously great.</label>
<br>
<input type="radio" name="feelings-2" id="ans-great-3" value="2">
<label for="ans-great-3">Not that great.</label>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>