HTML Head
HTML - The Head Element
The head part which is represented by HTML <head> tag.
The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, and <script> tags.
The HTML <head> Element
The <head> element is a container for metadata (data about data).
It is placed between the <html> tag and the <body> tag.
The HTML metadata is data about the HTML document.
Note: Metadata is not displayed.
The HTML <title> Element
The <title> element encloses the title of an HTML document.
It must occur within a document’s <head> element and must be present in all valid documents.
There should be only a single occurrence of this element. Meaningful titles are very important because they are used for bookmarking a page, are occasionally used by browsers to label locally saved pages, and are often used by search engines attempting to index the document.
Notes:
- The HTML
<title>element is found within the<head>tag. - You MUST include the
<title>tag within the<head>tag in your document.
Tips:
- Try to make sure your titles are as unique as possible within your own site.
- Search engines typically display about the first 55–60 characters of a page title.
- Avoid one- or two-word titles.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading of the document</h1>
<p>Paragraph of the document</p>
</body>
</html>
The HTML <meta> Element
The <meta> element specifies general information about a document that can be used in document indexing.
It also allows a document to define fields in the HTTP response header when it is sent from the server.
Example
<head>
<meta charset="UTF-8">
<meta name="language" content="EN">
<meta name="description" content="add up to 160 characters">
<meta name="keywords" content="your, keywords">
<meta name="robots" content="index, follow">
<meta name="copyright"content="company">
<meta name="author" content="John Doe, email@domain.com">
<meta name="distribution" content="Global">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The HTML <link> Element
The <link> empty element found in the head element specifies relationships between the current document and other documents.
Possible uses for this element include defining a relational framework for navigation and linking the document to a style sheet.
Notes:
<link>element can occur only in the head element; however, there can be multiple occurrences of<link>element.- HTML 3.2 defines only the href, rel, rev, and title attributes for the link element.
- HTML 2 defines the href, methods, rel, rev, title, and urn attributes for the link element. The methods and urn attributes were later removed from the specifications.
- Under XHTML 1.0, empty elements such as
<link>require a trailing slash:<link />. - WebTV supports the use of the value next for rel to preload the next page in a document series.
Example
<head>
<link rel="stylesheet" href="style.css">
</head>
The HTML <base> Element
The <base> element located within the head element specifies the base URL to be used for all relative URLs contained within a document.
Notes:
- There can only be only one
<base>element in a document, and it must be inside the<head>element. - HTML 2.0 and 3.2 define only the href attribute.
Example
<head>
<base href="/editor/" target="_blank">
</head>
<body>
<img src="smiley.png" width="50" height="50" alt="demo">
</body>
The HTML <style> Element
The <style> element is used to add style sheet rules for a document. This element should be found only in the head element.
Style information also can be specified in external style sheets as defined by a <link> tag.
Style information can also be associated with a particular element using the styleattribute (inline styling).
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: tomato;
}
h1 {
color: white;
}
p {
font-family: monospace;
}
</style>
</head>
<body>
<h1>The style element</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
The HTML <script> Element
The <script> element contains statements in a scripting language for client-side processing.
Scripting statements can either be included inline or loaded from an external file.
Notes:
- If the src attribute is specified, the
<script>element should not have a script embedded within its tags. - When the Type attribute is unset on the script object, then
text/javascriptis used by default. - The order of the script objects in a document can also be important, especially if scripting event handlers are assigned to one or more elements in the document.
- Using async="async" didn’t work in some older browser, instead async="true" was used.
- Use
<noscript>element for users that have disabled scripts in their browser, or have a browser that doesn't support client-side scripting.
Example
<script>
document.write("Hello World!");
</script>
A complete list of all HTML tags, see HTML Tag Reference.