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 with rel
when it is set to icons
type
: This indicates the type of content of the resourceThe 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 the name
or http-equiv
attribute.http-equiv
: This attribute, in the case of HTML5, can be set to default-style
, which sets the default style. Alternatively, it can be set to refresh
, 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"
.name
: This states the name of the metadata.The meta
tag has many nonstandard applications. The standardized applications can be viewed in Chapter 2, HTML Attributes.
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 is text
/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 URLThe 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>
3.145.35.194