Mark Pearl



You can have header elements at different parts of your page, sections can have headers.

    put header here

Represents a footer for its nearest ancestor sectioning content or sectioning root element.

Like the header, the footer element is not position-dependent. It should describe the content it is contained within.

 <!-- footer content -->

You can footers for different sections.


Not directly related to, but it expands on the content around it.

It is most appropriate when used to represent content that is not the primary focus of an article or page.


A section of a page that link to other pages or other parts of the page.


Contains a complete or self-contained composition in a document.
Essentially it is another type of section.
One questions would be would you syndicate the article in a rss feed.

  • Represents the main content that is directly related to the page.
  • Don’t include more than one main element in a document.
  • Don’t include the main element inside a article, aside, footer, header or nav element.
  • A unit of of content, optionally with a caption, that is self-contained.
  • Typically referenced as a single unit from the main flow of the document.
  • Can be moved away from the main flow of the document without affecting the document’s meaning.
    <img src="image.jpg" alt="My Picture" />
  • A caption or legend for a figure
    <img src="image.jpg" alt="My Picture" />
    <figcaption>This is a caption for the picture</figcaption>
  • Represents a time or date and time.


Input Types

<input type="search"/>
<input type="email" />
  • looks just like a normal text input, but with added usability on mobile devices.
  • Different browsers will render date pickers.
<input type="date"/>
Tel / Telephone
  • looks just like a normal text input, but with added usability on mobile devices.
<input type="tel" />
<input type="number" />

Adjusts the input type to make it easier to input numbers.


An imprecise input type for inputting a number.
Renders a slider

Month, Week
<input type="month" />  
<input type="week" />  

Gives you input types that are useful for selecting months / weeks.

Time, Datetime-Local

DateTime-Local represents a control for setting the element’s value to a string representing a local date and time with no timezone information.

<input type="time" />  

Form Elements

  • Represents a set of option elements that represent predefined options for other controls.
<input type="text" list="browsers"/>
<datalist id="browsers">
    <option value="Chrome"/>
    <option value="Firefox"/>
    <option value="Safari"/>

The above gives a textbox with autocomplete.

Form Attributes

Placeholder - specify a message shown inside the input

<input type="text" placeholder="Enter your email..." />

Autofocus - automatically focuses the specified input when a page is rendered

<input type="text" />
<input type="text" autofocus />
<input type="text" />

Required - notifes the user of an error if the input is left blank

<input type="text" required />

Pattern - accepts a javascript regex to match the entry to the correct pattern

<input type="text" pattern="[0-9]{3}" />  


  <label for="recipe-name"></label>
  <input type="text" id="recipe-name">
  <input type="submit" value="Submit text">
label, input {
  display: block;


Mozilla Html Developer Guide
Code Pen
Html Special Characters Reference

blog comments powered by Disqus

Want to get my personal insights on what I learn as I learn it? Subscribe now!