Coded Monkey Developer Reference

This is the most basic variant of an HTML page. Use this boilerplate as the base for your own pages.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Boilerplate Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

  </body>
</html>

Explanation

<!doctype html>

Every HTML page starts with the document type declaration (DTD) which tells the browser what kind of document it's dealing with and how to interpret it. <!doctype html> is the default declaration for an HTML page but there are more declarations that can be used for other types of documents and legacy versions of HTML.

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

This is the first example of tags and attributes in an HTML element, specifically the root element which means all other elements should be descendants of this element. Learn more on elements and tags by reading the Getting started with HTML guide of the Mozilla Developer Network.

The lang attribute used on the element specifies the language of the content within the element. This can be used on any element and can contain a large number of different values.

<head></head>

The head element contains all the metadata that doesn't directly fit into the contents of the page you want to show to the visitor.

<meta charset="utf-8">

Sets the character encoding used by the document to UTF-8, which supports a large number of characters of most known human languages. Wikipedia provides a good summary on the subject.

<meta name="viewport" content="width=device-width, initial-scale=1">

Tells mobile browsers to render the page as a responsive web page. If you would like your pages to be rendered by zooming out it's possible to replace device-width with a precise pixel count. More information about viewport meta tag can be found on the Mozilla Developer Network.

<title>Boilerplate Template</title>

The title element contains the text that appears as the name of the web page in the browser's title and tab bars.

<body></body>

The body element contains all the contents of the page you want to show to the visitor.

This page was last updated on 02 Apr 2017, at 15:19.
Enter a query to start searching