HTML Boilerplate: What is Boilerplate code.

HTML5 Boilerplate as designed and developed by Paul Irish & Divya Manian.
Date - Jun 3, 2015

HTML boilerplate is used as a basic empty template and present in most web pages. They provide the elements needed to create the basic page. HTML boilerplate is a set of code they provide a foundation for any website.

Boilerplates, including HTML documents, basic CSS style sheets, meta tags, include JavaScript tag, image favicon.

Popular HTML boilerplates are similar to basic empty templates. The HTML5 boilerplate template base to start your web page. you can need advanced option on the latest version of HTML5 boilerplate example

Page content Show more Page Content Show less

1. HTML5 Boilerplate Code
2.The lang Attribute
2.The HTML <head> Element
3.The <Meta> Tag
3.The <Title> Tag
4.What is The Viewport
5.The <Body> Tag

what is boilerplate code

Start your HTML page by copying and pasting this code HTML template:


<!doctype HTML>
<HTML lang="">
<head>
  <meta charset="utf-8">
<title>HTML5 boilerplate template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="description" content="This is the HTML Boilerplate.">
<meta name="theme-color" content="#ffffff">
</head>
<body>
  <!-- Add your site content here -->
  <p>Hello world!</p>
</body>
</HTML>

you can need advanced option on the latest version of HTML5 Boilerplate

Example -

Google Web Fonts
Normalize.css
Favorites Icon
Jquery
Prototype js
Angular js
Modernizr js
Google Analytics

The HTML5 Boilerplate framework very popular option in Bootstrap. It design layout, content, buttons, fonts, typography, button, and carousel, etc

Amp and Bootstrap are a very popular choice web designers and developers.

Doctypes - short for 'document type' - help browser to understand the version of HTML the document. Deﬁnes the browser we are using the most recent version of HTML which is HTML5. The declaration should always be included at the top of the HTML document, before the tag.

The tag represents the root of an HTML. Define how your web browser format and display the content. Most tags must have two parts, an opening, and a closing tag.

HTML lang Attribute

The lang attribute specifies the language of the element's content in the document. The lang attribute is part of Global Attributes and can be used on any HTML element.

HTML lang Attribute Code


<!doctype HTML>
  <HTML lang="en">
</HTML>

The HTML <head> Element

The HTML <head> elements : <title>, <style>, <meta>, <link> and <script>

What is The <meta> tag

Metadata is data (information) about data. The metadata will not be displayed on the page. charset attribute, page keywords, description, author of the document, and viewport.

charset attribute

This charset attribute declares the document's character encoding. Utf-8 contains every character in the Unicode character set.

Meta Tag Code


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here"

What is The Viewport

The viewport setting to make your website look good on all device platforms.

Viewport Code


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

What is The <title> Tag

The <title> tag defines the title of the page. Text written between this opening and the closing tag will be displayed on the tab of the page or in the title bar of the browser.

The information about the page for browsers and search engines.

Title Tag Code


<title>The title of the document</title>

What is The <Body> Tag

Opens the part of the document displayed to users, i.e. all the visible content of a page. No content should be added after the <Body> closing tag

The body tag wraps your page’s content, including text, images, video, forms, audio, and other interactive content.

If you want your project include some javascript file

Modernizr js Code


<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

Jquery Code


<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>

Angular js Code


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js" type="text/javascript"></script>

The features you need on your AMP page

Analytics

Adobe Analytics
Google Analytics

UI Tutorial