HTML head & metadata


The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.


The HTML <title> Element

The <title> element defines the title of the document, and is required in all HTML/XHTML documents.

The <title> element:

  • defines a title in the browser tab
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search engine results

A simple HTML document:


                    <!DOCTYPE html>
                    <html>
                    
                    <head>
                      <title>Page Title</title>
                    </head>
                    
                    <body>
                    The content of the document......
                    </body>
                    
                    </html>
                

The HTML <style> Element


                    <style>
                        body {background-color: powderblue;}
                        h1 {color: red;}
                        p {color: blue;}
                      </style>
                

The HTML <link> Element

The <link> element is used to link to external style sheets:


                    <link rel="stylesheet" href="mystyle.css">
                

The HTML <meta> Element

The <meta> element is used to specify which character set is used, page description, author, and other metadata.

Metadata is used by browsers (how to display content), search engines and other web services.

Define a description of your web page:


                          <meta name="description" content="Free Web tutorials">
                      

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.