Elements
Section
<section>
...
</section>
Header
You can have header elements at different parts of your page, sections can have headers.
<header>
put header here
</header>
Footer
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>
<!-- footer content -->
</footer>
You can footers for different sections.
Aside
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.
<aside>
...
</aside>
Nav
A section of a page that link to other pages or other parts of the page.
<nav>
<ul>
...
</ul>
</nav>
Article
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.
<article>
...
</article>
Main
- 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.
<main>
...
</main>
Figure
- 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.
<figure>
<img src="image.jpg" alt="My Picture" />
</figure>
Figcaption
- A caption or legend for a figure
<figure>
<img src="image.jpg" alt="My Picture" />
<figcaption>This is a caption for the picture</figcaption>
</figure>
Time
- Represents a time or date and time.
Forms
Input Types
Search
<input type="search"/>
<input type="email" />
Url
- looks just like a normal text input, but with added usability on mobile devices.
Date
- 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" />
Number
<input type="number" />
Adjusts the input type to make it easier to input numbers.
Range
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
Datalist
- 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"/>
</datalist>
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}" />
Keygen
Output
Examples
<form>
<label for="recipe-name"></label>
<input type="text" id="recipe-name">
<input type="submit" value="Submit text">
</form>
Styling
label, input {
display: block;
}
References
Mozilla Html Developer Guide
Code Pen
Html Special Characters Reference
