HTML Head Section

The <head> element contains metadata or information about the HTML page. It is a container for the following elements: <title><style><meta><link><script>, <noscript>, and <base>

Title tag

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab. The <title> tag is required in HTML documents!

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

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

Here are some tips for creating good titles:

  • Go for a longer, descriptive title (avoid one- or two-word titles)
  • Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
  • Do not use just a list of words as the title (this may reduce the page’s position in search results)

So, try to make the title as accurate and meaningful as possible!

Note: You can NOT have more than one <title> element in an HTML document.


Style tag

The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser. Note that when a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!

  p {color:black;}

Meta tag

The <meta> tag defines metadata about an HTML document. Metadata is data or information about data in your web page. <meta> tags are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag. name specifies the type of meta element it is; what type of information it contains. content specifies the actual meta content.

<!-- charset -->
<meta charset="UTF-8">

<!-- application-name, author, description, generator, keywords, viewport -->
<meta name="keywords" content="HTML, CSS, JavaScript">

<meta name="application-name" content="lovemesomecoding">

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

<meta name="author" content="John Doe">

<meta name="generator" content="folau">

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

<!-- http-equiv="content-security-policy|content-type|default-style|refresh" -->
<meta http-equiv="refresh" content="30">

Link tag

The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets. The <link> element is an empty element, it contains attributes only.

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

Script tag

The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Note: There are several ways an external script can be executed:

  • If async=”async”: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
  • If async is not present and defer=”defer”: The script is executed when the page has finished parsing
  • If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
<script type="text/javascript">

var username = 'folau';


NoScript tag

The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.

<noscript>Your browser does not support JavaScript!</noscript>

Base tag

The <base> tag specifies the base URL and/or target for all relative URLs in a document. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element.

<base href="" target="_blank">




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!


Leave a Reply

Your email address will not be published. Required fields are marked *