The next elements will give metadata about the document. In addition to this, you can also include links to resources, such as CSS and JavaScript.
The head element is the metadata parent element. All other metadata elements will be children of this element:
<head></head>
The head element usually must have a title element inside it. The elements that can go in head are title, link, meta, style, script, noscript, and base. These elements are explained next.
Here is an example of the head element that defines a title and stylesheet element:
<head>
<title>Title that appears as the tab name</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>The title element displays the title of the document. This is what is displayed in the browser's tab or the browser window:
<title></title>
The
link element links a resource to the current document:
<link crossorigin href media rel sizes type></link>
The attributes that are used in the link element are as follows:
crossorigin: This tells the browser whether to make the Cross-Origin Resource Sharing (CORS) request or nothref: This indicates the URL of the resourcemedia: This selects the media that this resource applies torel: This indicates the relationship of this resource to the documentsizes: This is used withrelwhen it is set toiconstype: This indicates the type of content of the resource
The link element has a lot of attributes, but most of the time, it is used for loading the CSS resources. This means that you will want to use the attributes href, rel, type, and media at least.
You can have multiple link elements in a head element. Here is a simple example of how to load CSS:
<link href="style.css" rel="stylesheet" type="text/css" media="all" /> <link href="style.css" media="screen" rel="styleshhet" sizes type="text/css"></link>
The meta element contains metadata about the document. The syntax is as follows:
<meta content http-equiv name></meta>
The attributes that are used in the meta element are as follows:
content: This states the value of either thenameorhttp-equivattribute.http-equiv: This attribute, in the case of HTML5, can be set todefault-style, which sets the default style. Alternatively, it can be set torefresh, which can specify the number of seconds taken to refresh the page and a different URL for the new page if needed, for example,http-equiv="1;url=http://www.google.com".
The meta tag has many nonstandard applications. The standardized applications can be viewed in Chapter 2, HTML Attributes.
Note
Apple has many meta tags that will pass information to an iOS device. You can set a reference to an App Store application, set an icon, or display the page in the full screen mode, as just a few examples. All of these tags are nonstandard, but useful when targeting iOS devices. This is true for many other sites and companies.
You can use multiple meta tags in a head element. Here are two examples. The first example will refresh the page every 5 seconds and the other will define the author metadata:
<meta http-equiv="refresh" content="5" /> <meta name="author" content="Joshua" />
The
style element contains the style information.
CSS:
<style media scoped type></style>
The attributes that are used in the style element are as follows:
media: This is a media queryscoped: The styles contained in this element only apply to the parent elementtype: This sets the type of document; the default value istext/css
The style element is usually in the head element. This allows you to define CSS styles for the current document.
The preferred method of using CSS is to create a separate resource and use the link element. This allows styles to be defined once and used everywhere on a website instead of defining them on every page. This is a best practice as it allows us to define the styles in one spot. We can then easily find and change styles.
Here is a simple inline stylesheet that sets the font color to blue:
<style media="screen" scoped type="text/css">
body{
color: #0000FF;
}
</style>The base element is the base URL for the document. The syntax is as follows:
<base href target>
The attributes that are used in the base element are as follows:
href: This indicates the URL to be used as the base URLtarget: This indicates the default target to be used with the URL
The script element allows you to reference or create a script for the document:
<script async crossorigin defer src type><script>
The attributes that are used in the script element are as follows:
async: This is a Boolean attribute that tells the browser to process this script asynchronously. This only applies to the referenced scripts.crossorigin: This tells the browser whether to make a CORS request or not.defer: This is a Boolean attribute that tells the browser to execute the script after the document has been parsed.src: This distinguishes the URL of the script.type: This defines the type of the script that defaults to JavaScript if the attribute is omitted.
The script element is the way to get JavaScript into your document and add enhanced interactivity. This can be done using a bare script tag and adding JavaScript into the element. Also, you can use the src attribute to reference an external script. It is considered a best practice to reference a script file as it can be reused here.
This element can be a child of head or can be placed anywhere in the body of the document. Depending on where the script element is located, you may or may not have access to the DOM.
Here are two examples of using a script element. The first example will reference an external script, the second will be an inline script element, and the last will show how to use the crossorigin attribute:
<script src="example.js" type="text/javascript"></script>
<script>
var a = 123;
</script>
<script async crossorigin="anonymous" defer src="application.js" type="text/javascript"><script>The noscript element will be parsed if scripting is turned off in the browser. The syntax is as follows:
<noscript></noscript>
If scripting is enabled, the content inside of this element will not appear on the page and the code inside it will run. If scripting is disabled, it will be parsed.
This element is mainly used to let the user know that the site may not work with JavaScript. Almost every website today not only uses JavaScript, but requires it.
Here is an example of the noscript element:
<noscript>
Please enable JavaScript.
</noscript>