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
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. Defines 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