HTML Head

The head element is the container for all the head elements, provide extra information about the page, or reference other resources that are required for the page to display or behave correctly.

HTML Head Elements

The head elements collectively describes properties of the document such as the title, provide meta information, instruct the browser where to find style sheets, and point to or include scripts that allow to extend HTML documents in highly active and interactive ways.

HTML elements that can be used inside the <head> element are: <title>, <base>, <link>, <style>, <meta>, <script> and <noscript> element.

The HTML title Element

The <title> element defines the title of the document.

The title element is required in all HTML/XHTML documents to produce a valid document. Only one title element is permitted in a document and it must be placed within the head element. The title element contains plain text and entities; it may not contain other markup.

The title of the document may be used for different purposes. For example:

  • To display a title in the browser title bar and in the task bar.
  • To provide a title for the page when it is added to favorites or bookmarked.
  • To displays a title for the page in search-engine results.
  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <title>Hello World Document</title>
  • </head>
  • <body>
  •     <p>Hello World!</p>
  • </body>
  • </html>
 

Tip:A good title should be short and specific to the document's content, because search engine's web crawlers pay particular attention to the words used in the title. The title should ideally be less than 65 characters in length. Learn more.


The HTML base Element

The HTML <base> element is used to define a base URL, for all relative links contained in the document, e.g. you can set the base URL once at the top of your page, and then all subsequent relative links will use that URL as a starting point.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <title>Defining a base URL</title>
  •     <base href="https://www.tutorialrepublic.com/">
  • </head>
  • <body>
  •     <p><a href="html-tutorial/html-head.php">HTML Head</a>.</p>
  • </body>
  • </html>

The link above will actually resolve to https://www.tutorialrepublic.com/html-tutorial/html-head.php regardless of the URL of the current page. This is because the relative URL indicated in the HTML Tutorial link: html-tutorial/html-head.php is added to the end of the base URL: https://www.tutorialrepublic.com/.

 

Warning:The HTML <base> element must appear before any element that refers to an external resource. HTML permits only one base element for each document.


The HTML link Element

The <link> element defines the relationship between the current document and an external documents or resources. A common use of link element is to link to external style sheets.

  • <head>
  •     <title>Linking to style sheets</title>
  •     <link type="text/css" rel="stylesheet" href="style.css">
  • </head>

To learn more about linking stylesheets, please check out tutorial on HTML styles.

 

Note:A document's <head> element may contain any number of <link> elements. The <link> element has attributes, but no contents.


The HTML style Element

The <style> element is used to define embedded style information for an HTML document. The style rules inside the <style> element specify how HTML elements render in a browser.

  • <head>
  •     <title>Internal style sheet</title>
  •     <style type="text/css">
  •         body { background-color: YellowGreen; }
  •         h1 { color: red; }
  •         p { color: green; }
  •     </style>
  • </head>
 

Note:An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate. Learn more.


The HTML meta Element

The <meta> element provides metadata about the HTML document. Metadata is a set of data that describes and gives information about other data.

The meta element will be explained in the next chapter.


The HTML script Element

The <script> element is used to define a client-side script, such as a JavaScript.

The script and noscript element will be explained in a later chapter.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.