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.

While .ico is the traditional format, modern browsers also support .png (using type="image/png") and even .svg files.

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

Comments

``

Comments are not displayed by the browser, but they can help document your HTML source code.

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add a link here later -->

Entities

Special Characters

HTML entities are used to display reserved characters (which would otherwise be interpreted as HTML code) or characters that are not present on a standard keyboard. They typically start with an ampersand (&) and end with a semicolon (;).

One of the most common entities is the Copyright symbol.

Character	Entity Name	Entity Number
©	`©`	`©`
®	`®`	`®`
&	`&`	`&`
<	`<`	`<`
>	`>`	`>`

<p>&copy; 2026 Your Company Name</p>

Output:

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>

Elements: An HTML element consists of the opening tag, the content, and the closing tag. The entire structure (<tagname>Content</tagname>) is called an element. Some elements are self-closing and don’t have content (e.g., <img />, <br />).
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>

Structure

Semantic vs Non-Semantic

Semantic elements are HTML tags that clearly describe their meaning to both the browser and the developer (e.g., <header>, <footer>, <article>).

Non-semantic elements tell the browser nothing about their content (e.g., <div> and <span>).

Why use Semantic HTML?

Accessibility: Screen readers and assistive technologies use these tags to help impaired users navigate the page layout.
SEO: Search engines use semantic tags to understand the importance and context of your content, leading to better indexing.
Readability: Makes the code much easier to maintain by replacing “div soup” with meaningful landmarks.

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.

Main

`<main>`

The <main> tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across pages, such as sidebars, navigation links, copyright information, site logos, or search forms.

Note: There must not be more than one <main> element in a document.

<main>
  <h1>Welcome to the documentation</h1>
  <p>This is the unique main content of this page.</p>
</main>

Output:

Welcome to the documentation

This is the unique main content of this page.

`<header>`

The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains one or more heading elements (<h1> - <h6>), logo or icon, or authorship information.

<header>
  <h1>My Awesome Website</h1>
  <p>Exploring the world of web development.</p>
</header>

Output:

My Awesome Website

Exploring the world of web development.

`<footer>`

The <footer> tag defines a footer for a document or section. A <footer> element typically contains authorship information, copyright information, contact information, sitemap, back to top links, or related documents.

<footer>
  <p>© 2026 Web Dev Docs. All rights reserved.</p>
</footer>

Output:

Nav

`<nav>`

The <nav> tag defines a set of navigation links. Notice that not all links in a HTML document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.

<nav>
  <ul>
    <li><a href="#main">Home</a></li>
    <li><a href="#structure">Structure</a></li>
  </ul>
</nav>

Output:

Article

`<article>`

The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Typical use cases include:

Forum posts
Blog posts
User comments
News stories

<article>
  <h2>How to Learn HTML</h2>
  <p>Published: January 21, 2026</p>
  <p>The first step is understanding semantic tags...</p>
</article>

Output:

How to Learn HTML

Published: January 21, 2026

The first step is understanding semantic tags…

Aside

`<aside>`

The <aside> tag defines some content aside from the content it is placed in (like a sidebar). The aside content should be indirectly related to the surrounding content.

<aside>
  <h4>Fact of the Day</h4>
  <p>HTML was created by Tim Berners-Lee in 1991.</p>
</aside>

Output:

Text Formatting

Strong

`<strong>` `<b>`

The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.

Emphasis

`<em>` `<i>`

The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.

Span

`<span>`

The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> element is easily styled by CSS, or manipulated with JavaScript using the class or id attribute.

Details & Summary

`<details>` & `<summary>`

The <details> tag specifies additional details that the user can open and close on demand. The <summary> tag defines a visible heading for the <details> element.

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed!</p>
</details>

Output:

Click to expand

Hidden content revealed!

Tables

Table Structure

`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`

HTML tables allow web developers to arrange data into rows and columns.

<table>: The container for the entire table.
<thead>: Groups the header content in a table.
<tbody>: Groups the body content in a table.
<tfoot>: Groups the footer content in a table.
<tr>: Defines a row in a table.
<th>: Defines a header cell in a table. The text is typically bold and centered.
<td>: Defines a standard data cell in a table.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Media

Image

`<img>`

The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

<img src="https://picsum.photos/300/200" alt="Image" width="460" height="345" />

src: Specifies the path to the image.
alt: Specifies an alternate text for the image, if the image for some reason cannot be displayed.

Output:

Video

`<video>`

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

<video width="320" height="240" controls>
  <source
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>

<video
  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls
/>

Output:

Audio

`<audio>`

The <audio> tag is used to embed sound content in a document, such as music or other audio streams.

<audio controls>
  <source
    src="https://storage.opentunes.io/mp3s/cozy_garden.mp3"
    type="audio/mpeg"
  />
  Your browser does not support the audio element.
</audio>

<audio src="https://storage.opentunes.io/mp3s/cozy_garden.mp3" controls />

Output:

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.

Form

Form Container

`<form>`

The <form> element is used to create an HTML form for user input.

<form action="/" method="post">...</form>

<form action="https://www.google.com/search" method="post">...</form>

Label

`<label>`

The <label> element represents a caption for an item in a user interface. It is essential for accessibility and usability.

Benefits:

Accessibility: Screen readers will read out the label text when the user focuses on the input element.
Improved Hit Area: Clicking the text within the <label> element will automatically focus or toggle the associated input. This is particularly helpful for small checkboxes and radio buttons.

Explicit Association (Recommended)

Use the for attribute on the label, matching the id of the input.

<label for="username">Username:</label>
<input type="text" id="username" name="user" />

Implicit Association (Nesting)

Alternatively, you can wrap the <input> inside the <label>. This method does not strictly require id/for attributes for association, though they are still recommended for clarity.

<label>
  Email:
  <input type="email" name="user_email" />
</label>

Input

`<input>`

The <input> element is the most versatile form element, changing its behavior and appearance based on the type attribute.

Common Types

Type	Description
`text`	Default. Single-line text field.
`password`	Characters are masked for security.
`email`	Validates for email format.
`number`	Restricts input to numeric values.
`checkbox`	Multi-select toggle.
`radio`	Single-select from a group.
`date`	Date picker (Year, Month, Day).
`file`	File upload selector.
`range`	Slider control for numeric values.
`color`	Visual color picker.
`tel`	Specific for phone numbers (triggers numeric keypad on mobile).
`url`	Validates for URL format.
`search`	Optimized for search queries (often adds a “clear” button).

Examples

Text & Password

<label>User: <input type="text" placeholder="Username" /></label>
<label>Pass: <input type="password" /></label>

Output:

User:

Pass:

Number & Range

<label>Quantity: <input type="number" min="1" max="10" value="1" /></label>
<label>Volume: <input type="range" min="0" max="100" /></label>

Output:

Quantity:

Volume:

Checkbox & Radio

<label><input type="checkbox" checked /> I agree</label>
<br />
<label><input type="radio" name="option" /> Option A</label>
<label><input type="radio" name="option" /> Option B</label>

Output:

I agree

Option A

Option B

Date & Time

<label>Date: <input type="date" /></label>
<label>Time: <input type="time" /></label>
<label>Month: <input type="month" /></label>

Output:

Date:

Time:

Month:

File Upload

<label>Choose file: <input type="file" /></label>

Output:

Choose file:

Color Picker

<label>Theme: <input type="color" value="#ff0000" /></label>

Output:

Theme:

Common Attributes

Attributes provide additional information or behavior to input fields:

name: Acts as an identifier for the data when it is submitted to a server.
value: Specifies the initial value of the input field.
placeholder: A short hint that describes the expected value of an input field (e.g., “Enter your name”).
required: A boolean attribute that specifies that the user must fill in a value before submitting the form.
id: Unique identifier used to link the input with a <label>.

<input
  type="text"
  name="username"
  id="user"
  placeholder="Username"
  required
  value="DefaultUser"
/>

Textarea

`<textarea>`

The <textarea> tag defines a multi-line text input control.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Button

`<button>`

The <button> tag defines a clickable button. Unlike <input type="button">, you can put content (text or images) inside a <button> element.

Button Types

type="submit": The default type. It submits the form data to the server defined in the form’s action attribute.
type="reset": Resets all the controls in the form to their initial values.
type="button": A clickable button that does nothing by default. It is usually used with JavaScript to trigger a script.

<button type="submit">Submit Form</button>
<button type="reset">Clear Data</button>
<button type="button" onclick="alert('Hello!')">Non-submitting Button</button>

`popover` attribute

The popover attribute is used to designate an element as a popover element.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Output:

Dialog

`<dialog>`

The <dialog> element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

You can use the .showModal() method to open it as a modal (blocking the rest of the page) or .show() for a non-modal version.

<dialog id="favDialog">
  <form method="dialog">
    <p>This is a native dialog box.</p>
    <button>Close</button>
  </form>
</dialog>

<button onclick="favDialog.showModal()">Open Dialog</button>

Output:

Assets & Resources

CSS

There are three ways to include CSS in your HTML document:

1. Inline CSS

Used to apply a unique style to a single HTML element.

<p style="color: blue;">This is a blue paragraph.</p>

2. Internal CSS

Defined in a <style> element within the <head> section of an HTML page.

<head>
  <style>
    body {
      background-color: linen;
    }
    h1 {
      color: maroon;
    }
  </style>
</head>

3. External CSS

Used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire website by changing just one file. This is the most recommended way.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Media Attributes

You can use the media attribute on <link> tags to specify when the stylesheet should be applied:

all: Default. Used for all media type devices.
print: Used for printers.
screen: Used for screens (computers, tablets, phones).
speech: Used for screenreaders.
screen and (min-width: 800px): Conditional loading based on device width.

Javascript

There are three ways to include JavaScript in your HTML document:

1. Inline JS

JavaScript code written directly inside an HTML attribute (like onclick). Not recommended for larger projects.

<button onclick="alert('Hello!')">Click Me</button>

2. Internal JS

JavaScript code written inside a <script> tag.

<script>
  function myFunction() {
    console.log('Internal script running');
  }
</script>

3. External JS

JavaScript code kept in a separate .js file and linked via the src attribute. This is the preferred method to separate logic from structure.

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

Loading Attributes (`async` & `defer`)

By default, scripts are “render-blocking.” You can modify this behavior:

async: The script is downloaded in parallel and executed as soon as it’s available.
defer: The script is downloaded in parallel but only executed after the HTML document has been fully parsed.

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" />

Body

<body>

Fundamentals

Comments

Entities

Special Characters

Tags & Attributes

Headings

<h1> - <h6>

Paragraphs

<p>

Anchors (Links)

<a>

Lists

Unordered List <ul>

Ordered List <ol>

Structure

Semantic vs Non-Semantic

Why use Semantic HTML?

Div

<div>

Section

<section>

Section Title

Main

<main>

Welcome to the documentation

Header

<header>

Footer

<footer>

Nav

<nav>

Article

<article>

How to Learn HTML

Aside

<aside>

Text Formatting

Strong

<strong> <b>

Emphasis

<em> <i>

Span

<span>

Details & Summary

<details> & <summary>

Tables

Table Structure

<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

Media

Image

<img>

Video

<video>

Audio

<audio>

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" />`

`<body>`

``

`<h1>` - `<h6>`

`<p>`

`<a>`

Unordered List `<ul>`

Ordered List `<ol>`

`<div>`

`<section>`

`<main>`

`<header>`

`<footer>`

`<nav>`

`<article>`

`<aside>`

`<strong>` `<b>`

`<em>` `<i>`

`<span>`

`<details>` & `<summary>`

`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`

`<img>`

`<video>`

`<audio>`

`<figure>`

`<form>`

`<label>`

`<input>`

`<textarea>`

`<button>`

`popover` attribute

`<dialog>`

Loading Attributes (`async` & `defer`)