HTML5

HTML Boiler Plate

A blank HTML5 document example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Main content here -->
  </body>
</html>

Doctype

`<!DOCTYPE html>`

HTML documents must start with a <!DOCTYPE html> declaration.

The <!DOCTYPE html> declaration defines that this document is an HTML5 document. This declaration is not an HTML tag, it is “information” to the browser about what document type to expect.

HTML

`<html>`

The <html> tag represents the root of an HTML document and should contain all HTML (except for <!DOCTYPE html>) within the document.

`lang="en"`

<html lang="en"></html>

Use the lang attribute (containing your countries ISO code) to define the web page language.

Head

`<head>`

The <head> tag contains non-visible meta information about the HTML page and is important for setting basic details allowing browsers to render the page correctly.

Charset

`<meta charset="UTF-8">`

Specifies the character encoding to use to read the document.

The charset is a meta data attribute, placed at the very top of the <head> of a webpage and specifies the character encoding for your browser to use when converting your typed characters into machine-readable code, basically means it’s the machine language the browser will use to understand and render web page characters.
It’s common practice to use UTF-8 and is actually the default character encoding for HTML5 documents and commonly default for browsers.

UTF-8

UTF-8 (UCS Transformation Format 8) is the World Wide Web’s most common character encoding (An encoding defines a mapping between bytes and text). Each character is represented by one to four bytes. UTF-8 is backward-compatible with ASCII and can represent any standard Unicode character.

Viewport

`<meta name="viewport" content="...">`

This gives the browser instructions on how to control the page’s dimensions and scaling.

An important meta tag contained within the <head> of a webpage to give information on how to render the initial scales/dimensions of the document.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.4"
/>

`width=device-width`

Sets the width of the page to follow the screen-width of the device.

`initial-scale=1.0`

Sets the initial zoom level when the page is first loaded.

`maximum-scale=1.4`

Sets a maximum zoom level for the page when in use (to be considered optional).

Title

`<title>`

Contained within the <head> tag, consider it almost like the “name” of the web page.

The <title> tag specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab), this is also commonly used as a strong SEO signal for what the web page is about.

Favicon

`<link rel="icon" href="favicon.ico" type="image/x-icon" />`

A small, most commonly, 16px × 16px pixel .ico format icon placed within the <head> of the document, used in things like tabs/bookmarks etc to help identify the webpage.

Canonical

`<link rel="canonical" href="https://www.website.com" />`

Placed within the <head> of a webpage document, the canonical tag highlights which url is the definitive version of a web page, therefore resolving any possible duplication and allowing things like search engine crawlers to index the exact page ignoring duplication (meaning a stronger SEO signal).

When a website is set up correctly then a lot of this duplication disappears, for example, the most common duplication is when a website is accessible via www and non www (https://www.some-website.com/page & https://some-website.com/page), a canonical would point to which address should be used as the actual version and therefore be treated as the more important and indexed.

Body

`<body>`

The <body> tag defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Fundamentals

Tags & Attributes

HTML is built using tags. A tag is a keyword surrounded by angle brackets, like <tagname>. Most HTML elements have an opening tag and a closing tag.

<tagname>Content goes here...</tagname>

Attributes: Provide additional information about an element. They are always specified in the start tag.
Format: name="value"

Headings

`<h1>` - `<h6>`

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.
<h6> defines the least important heading.
Browsers automatically add some white space (a margin) before and after a heading.

Note: Only use one <h1> per page. Search engines use your headings to index the structure and content of your web pages.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

`<p>`

The <p> tag defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Anchors (Links)

`<a>`

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

<!-- Link to an external website -->
<a href="https://www.example.com">Visit Example</a>

<!-- Link to an internal page (Relative link) -->
<a href="/about">About Us</a>

<!-- Open link in a new tab -->
<a href="https://www.google.com" target="_blank">Google</a>

Lists

Unordered List `<ul>`

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered List `<ol>`

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Common Includes:

Javascript

`<script src="min.script.js"></script>`

Basic tag to include a javascript file. Javascript files can be render blocking (unless specified), so should be placed just before the closing </body> tag.

`async`

<script src="min.script.js" async></script>

The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes).

`defer`

<script src="min.script.js" defer></script>

The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

CSS

`<link rel="stylesheet" href="min.styles.css" media="all" />`

Basic tag to include a CSS (Cascading Style Sheet) in your html document. This tag should be placed within the <head> of your html document.

`media="all"`

Default. Used for all media type devices.

`media="print"`

Used for printers.

`media="screen"`

Used for computer screens, tablets, smart-phones etc.

`media="speech"`

Used for screenreaders that “reads” the page out loud.

`media="screen and (min-width:800px)"`

Use media query’s for Max/Min widths to apply style sheet with the benefit of only loading what’s needed.

Structure:

Div

`<div>`

Div stands for division and is probably the most common structural element in HTML.

The <div> element is a multi-purpose container and is used to group HTML elements together to create all sorts of layouts. Div’s can also be manipulated in so many ways that it truly is the Swiss Army knife of HTML, one of the main reasons for this is it does not inherently have style (until added via CSS) and is classed as a ‘blank’ element not representing anything other than a divider until it’s altered to do so.

The <div> element should be used only when no other semantic element is available.

<div>... Pretty Much anything....</div>

Section

`<section>`

Defines a section of information within the webpage.

The <section> HTML element is a specific self-contained area of information of a website, unlike a <div> which is just a divider and can be manipulated into lots of different things, a <section> is more of a standalone area of information within the document, in fact, a section should generally always have a heading because it is meant to be an informative area. In order to understand when to use a section, consider it in an atomic way, can you pick this <section> up and place it elsewhere while still retaining all the relevant information within it?

<section>
  <h2>Section Title</h2>
  <p>Loads of information on a certain subject</p>
  <ul>
    <li>A list of information about the section subject</li>
    <li>More information!</li>
    <li>More information!</li>
  </ul>
  <p>
    That's it, thats all the information on this page about this sections
    subject.
  </p>
</section>

Output:

Section Title

Loads of information on a certain subject

A list of information about the section subject
More information!
More information!

That’s it, thats all the information on this page about this sections subject.

Expandable Elements:

Details

`<details>`

The <details> tag specifies additional details that the user can open and close on demand like an accordion. Great for FAQ’s.

<details>
  <summary>Summary tag, aka heading.</summary>
  <p>Details area, can be whatever is needed....</p>
</details>

Output:

Summary tag, aka heading.

Details area, can be whatever is needed…

Summary

<summary>

The <summary> tag is used in conjunction with <details> to specify a visible heading for the details.
Think of this as an accordion area, with the summary tag defining the heading and clickable area.

Text:

Abbreviated

`<abbr>`

The <abbr> tag specifies that a piece of text is an abbreviation. When a user hovers over the abbreviation, the full wording will be displayed in a tooltip. This is particularly useful for search engine crawlers, which will find and index the full meaning of the abbreviation.

<p>
  The <abbr title="HyperText Markup Language">HTML</abbr> specification is the
  core language of the World Wide Web.
</p>

Output:

The HTML specification is the core language of the World Wide Web.

Address

`<address>`

The <address> tag specifies that a piece of text is actually an address, particularly useful for search engine crawlers.

<address>40 Some Road, Some Place, Here, GH14 5TK.</address>

Output:

40 Some Road, Some Place, Here, GH14 5TK.

Quotation

`<q>`

The <q> tag in HTML is used for indicating a short quotation, rendering it with surrounding quotation marks in the browser.

<q
  >If you set your goals ridiculously high and it's a failure, you will fail
  above everyone else's success.</q
>
-James Cameron

Output:

If you set your goals ridiculously high and it’s a failure, you will fail above everyone else’s success.

-James Cameron

Mark

`<mark>`

The <mark> tag in HTML is meant to indicate relevant or highlighted content within a document. Great for search results, you can wrap matched terms in <mark> to emphasize them.

<p>Search Results for "beach":</p>
<p>
  Looking for a relaxing getaway? Our top pick is a <mark>beach</mark> cottage
  with stunning sea views.
</p>

Output:

Search Results for “beach”:

Looking for a relaxing getaway? Our top pick is a beach cottage with stunning sea views.

Definition

`<dfn>`

The <dfn> tag in HTML is used to mark up the defining instance of a term, making it ideal for providing context to brand names or key terms. It enhances accessibility for screen readers and can display tooltips on hover to provide extra meaning.

<p>
  <dfn title="Child friendly holiday cottage accommodation">Kid Adventures</dfn>
  offers a selection of cottages perfect for you and your family.
</p>

Output:

Kid Adventures offers a selection of cottages perfect for you and your family.

Code

`<code>`

The <code> tag is used to display computer code in a way that makes it visually distinct from regular text. It is typically used for inline snippets of code, such as function names, variables, or short scripts.

<p>
  To print a message in JavaScript, use
  <code>console.log("Hello, world!");</code>
</p>

Output:

To print a message in JavaScript, use console.log(“Hello, world!”);

Samp

`<samp>`

The <samp> tag is used to represent sample output from a program, command-line interface, or system message, making it ideal for documentation and technical content where distinguishing output from regular text is important.

<p>After running the command, you should see:</p>
<p><samp>Process completed successfully.</samp></p>

Output:

After running the command, you should see:

Process completed successfully.

Keyboard Input

`<kbd>`

The <kbd> tag is used to represent keyboard input, making it useful for documenting keyboard shortcuts, commands, or user input instructions.

<p>To refresh a webpage, press <kbd>Ctrl</kbd> + <kbd>R</kbd>.</p>

Output:

To refresh a webpage, press Ctrl + R.

Word Break Opportunity

`<wbr>`

The <wbr> (Word Break Opportunity) tag suggests a line break if needed, helping prevent long words or URLs from breaking layouts. It doesn’t force a break but allows one if necessary.

<p>
  Visit our website: www.example<wbr />.com/long-url-that-might-break-the-layout
</p>

Output:

Visit our website: www.example

.com/long-url-that-might-break-the-layout

Media:

figure

`<figure>`

The <figure> tag is used to group together media content, such as images, illustrations, diagrams, or videos, along with their optional captions using the <figcaption> tag.

<figure>
  <img src="https://picsum.photos/300/200" alt="Placeholder Image" />
  <figcaption>Image Description Here.</figcaption>
</figure>

Output:

Placeholder Image — Image Description Here.

Inputs:

Color Picker

`<input type="color" value="#ff0000" />`

The color picker input tag creates a color picker input field that allows users to select a color from a visual interface.

<input type="color" name="color-picker" value="#ff0000" />

Output:

Output

`<output>`

Displays calculated results from user input dynamically without needing JavaScript. (though JS can enhance it)

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <label>Enter a number: <input type="number" id="a" value="10" /></label>
  <label>Enter another number: <input type="number" id="b" value="20" /></label>
  <p>Result: <output name="result" for="a b">30</output></p>
</form>

Output:

`<div popover>`

The popover attribute turns an element (like a <div>) into a native popover that can be programmatically shown, hidden, or toggled using the popovertarget attribute on a trigger element.

<button popovertarget="popover-example">Show Popover</button>
<div id="popover-example" popover>
  <p>Popover!</p>
  <p>Click away or press <kbd>esc</kbd> to close.</p>
</div>

Output:

Data Visualization:

Meter

`<meter value="60" min="0" max="100">60%</meter>`

The <meter> tag visually represents a value within a set range, making it great for progress indicators, ratings, or measurements without extra JavaScript. It’s semantic, accessible, and even changes color based on value thresholds.

<section>
  <label for="storage">Storage usage:</label>
  <meter id="storage" value="60" min="0" max="100" low="30" high="55">
    60%
  </meter>
</section>

Output:

Storage usage:

60%

Progress

`<progress value="30" max="100">30%</progress>`

The <progress> tag represents the progress of a task, such as file downloads or form completion, providing a visual indicator of how much is done. It works with both value (current progress) and max (total value) attributes.

<p>Downloading: <progress value="30" max="100">30%</progress></p>

Output:

Downloading:

30%

References

Built with passion by Ngineer Lab

HTML5

HTML Boiler Plate

Doctype

<!DOCTYPE html>

HTML

<html>

lang="en"

Head

<head>

Charset

<meta charset="UTF-8">

UTF-8

Viewport

<meta name="viewport" content="...">

width=device-width

initial-scale=1.0

maximum-scale=1.4

Title

<title>

Favicon

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Canonical

<link rel="canonical" href="https://www.website.com" />

Body

<body>

Fundamentals

Tags & Attributes

Headings

<h1> - <h6>

Paragraphs

<p>

Anchors (Links)

<a>

Lists

Unordered List <ul>

Ordered List <ol>

Common Includes:

Javascript

<script src="min.script.js"></script>

async

defer

CSS

<link rel="stylesheet" href="min.styles.css" media="all" />

media="all"

media="print"

media="screen"

media="speech"

media="screen and (min-width:800px)"

Structure:

Div

<div>

Section

<section>

Section Title

Expandable Elements:

Details

<details>

Summary

Text:

Abbreviated

<abbr>

Address

<address>

Quotation

<q>

Mark

<mark>

Definition

<dfn>

Code

<code>

Samp

<samp>

Keyboard Input

<kbd>

Word Break Opportunity

<wbr>

Media:

figure

<figure>

`<!DOCTYPE html>`

`<html>`

`lang="en"`

`<head>`

`<meta charset="UTF-8">`

`<meta name="viewport" content="...">`

`width=device-width`

`initial-scale=1.0`

`maximum-scale=1.4`

`<title>`

`<link rel="icon" href="favicon.ico" type="image/x-icon" />`

`<link rel="canonical" href="https://www.website.com" />`

`<body>`

`<h1>` - `<h6>`

`<p>`

`<a>`

Unordered List `<ul>`

Ordered List `<ol>`

`<script src="min.script.js"></script>`

`async`

`defer`

`<link rel="stylesheet" href="min.styles.css" media="all" />`

`media="all"`

`media="print"`

`media="screen"`

`media="speech"`

`media="screen and (min-width:800px)"`

`<div>`

`<section>`

`<details>`

`<abbr>`

`<address>`

`<q>`

`<mark>`

`<dfn>`

`<code>`

`<samp>`

`<kbd>`

`<wbr>`

`<figure>`

`<input type="color" value="#ff0000" />`

`<output>`

`<div popover>`

`<meter value="60" min="0" max="100">60%</meter>`

`<progress value="30" max="100">30%</progress>`