- 3 years ago
- Shahzad Gujjar
- 2,291 Views
-
2
The importance of head elements will be discussed in this tutorial.
The HTML head Element
The <head> element acts as a container for all head components, which provide additional information about the document (metadata) or a reference to other resources that are needed for the document to view or act appropriately in a web browser.
The head elements define the document’s properties such as title, provide meta information such as character set, and tell the browser where to search for style sheets or scripts that allow you to expand the HTML document in highly active and interactive ways.
The <title>, <base>, <link>, <style>, <meta>, <script>, and <noscript> elements are all HTML elements that can be used within the <head> element.
The HTML title Element
The title> element describes the document’s title.
To create a valid document, the title element is needed in all HTML/XHTML documents. In a document, only one title element is allowed. It must be located within the <head> element. The title element may only contain plain text and entities; no other markup tags are permitted.
The document’s title may be used for a variety of purposes. such as :
- To make a title appear in the browser title bar and task bar.
- When a page is bookmarked or added to favorite, it needs a title.
- In search engine results, a title for the page is presented.
The example below shows how to add a title to an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
NOTE: Because search engine web crawlers pay close attention to the words used in the title, a good title should be short and specified to the document’s content.
The HTML base Element
The HTML base> element is used to specify a base URL for all relative links in the document; for example, you can set the base URL once at the top of your page, and all subsequent relative links will use that URL as their starting point. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="https://www.learncodeweb.com/">
</head>
<body>
<p><a href="/learn/html/">HTML Tutorials</a>.</p>
</body>
</html>
Regardless of the current page’s URL, the hyperlink in the example above will resolve to https://learncodeweb.com/learn/html/.
This is due to the fact that the link’s relative URL: /learn/html/ is appended to the end of the base URL: https://learncodeweb.com/.
CAUTION: Before any element that refers to an external resource, the HTML <base> element must appear. Each document can only have one base element in HTML.
The HTML link Element
The <link> element establishes a connection between this document and other documents or resources. Link to external style sheets is a common use of the link element.
<head>
<title>Linking Style Sheets Add External Style Sheet</title>
<link rel="stylesheet" href="style.css">
</head>
Please see the CSS tutorial section for more information on style sheets.
The <head> element of an HTML document may contain any number of <link> elements. Although the <link> element has attributes, it does not have any content.
The HTML style Element
An HTML document’s embedded style information is defined by the <style> element. Inside the <style> element the style rules specify how HTML elements display in a browser.
<head>
<title>Embedding Style Sheets</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head>
If a single document has a unique style, an embedded style sheet can be used. An external style sheet would be more appropriate if the same style sheet is used in various documents. For more details, see the HTML styles tutorial.
The HTML meta Element
The HTML document’s metadata is provided by the <meta> element. A set of data called metadata defines and provides information about other data. For example:
<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Head">
</head>
The meta element will be explored in depth in detail in the following chapter.
The HTML script Element
The script> element is used in HTML documents to describe client-side scripts, such as JavaScript.
In the browser, the following example will display a greeting message:
<head>
<title>Adding JavaScript</title>
<script>
document.write("<h1>Hello World!</h1>")
</script>
</head>
In a later chapter, the script and NoScript elements will be explored in more detail.
- 3 years ago
- Shahzad Gujjar
- 2,291 Views
-
2
