Explain HTML 5 boilerplate

Explain HTML 5 boilerplate

HTML boilerplate

What is HTML?

Html stands for Hypertext Markup Language. It is used to design web pages using the markup language.

Example of HTML boilerplate.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

What is a doctype HTML?

Html <!DOCTYPE> tab is used to inform the browser about the version of HTML used in the document. <!DOCTYPE> is not a tag/element, it is just an instruction to the browser about the document type.

<!DOCTYPE html>

What is an HTML tag?

HTML tag are the keywords on a web page that defines how your web browser must format and display your web page.

Almost all tags contain two parts an opening, and a closing tag.

<html> </html>

What HTML lang ?

The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web page.

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

What are head tags in HTML?

The <head> tag defines metadata (document title, character set, style, links, script).

The HTML head section is not shown to the users of the website: instead, it gives instructions for the machine to display a webpage.

<head></head>

What are meta tags in HTML?

meta tags represent metadata. They are essentially used for defining and describing data about data and are used to add extra information to the data inside the webpage.

Metadata will not be displayed on the page but is machine parsable.

Adding Meta Tags Attribute & Description

  1. Name:-

    The name attribute specifies the name for the metadata.

    Example:-

     application-name,author,description,generator,keywords,viewport
     <meta name="author" content="Ankush">
     <meta name="description" content="learn about metadata">
    
  2. content:-

    The content Attributes give the value of the document metadata information.

    Example:-

     <meta name="description" content="learn about metadata">
    
  3. http-equiv:-

    The http-equiv attribute provides an HTTP header for the information/value of the content attribute.

    For example, http-equiv can be used to refresh the page or to set the cookie and more.

    Example:-

      <meta http-equiv="refresh" content="30">
    
  4. charset:-

    The charset attribute specifies the character encoding used by the document.

    Example:-

      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
    

What is <title> tag in HTML?

The title tag defines a title of an HTML document. A title tag must be the precise description of a page’s content. The title is displayed in the browser toolbar and it is necessary for search engine optimization.

The HTML <title> must be used inside the <head> tag.

Example:-

 <title>First web page.</title>

What is <body> tag in HTML?

The <body> HTML element represents the content of an HTML document which display on browser. There can be only one <body> element in a document.

The body tag defines a web page's content(link, text, images etc.)

Example:-

<!DOCTYPE html>
<html>
  <head>
    <title>Html boilerplate explanation</title>
  </head>
  <body>
    <p>Content of the document</p>
  </body>
</html>