The first section we have is the head. Now this isn’t the header that we see on a web page. Rather, this is like an old style head of a file, which contains metadata about our web page. Metadata is data about our data, or in this case, our website.
There are tags which should be in the head, and those which are typically there. Technically, none of these tags are “required”, however, good form dictates that they should be present.
The head has an opening and closing tag which will contain these other tags.
<title>
The title tag is a matched pair of tags which is used to define a title of the page. This is information isn’t shown on the web page itself, but is shown in the browser tab that contains the web page, and in search engine results. It may appear in other places, but is more used as a short descriptor of the page itself.
<meta>
The meta tags are a series of self contained tags (they don’t have a closing tag) which store meta information about the web page. While this isn’t displayed directly, it may be used by the browser, or other outside sources like an outside search engine.
Generally, meta tags follow the rule of <meta name=”” value=””>, but not always. Notice that the attributes are used to define the key value pairs of information.
<meta charset="utf-8">
<meta name="description" content="The HTML5 sample page">
<meta name="author" content="Walter Wimberly">The charset meta tag lets the browser know how the page is encoded. Utf-8 is common for English languages, however there are other languages which need different types of encoding to display all of the characters.
The description meta tag is used to describe the page in a short (sentence or two) manner. This tag was originally used by search engines to help determine what the page is about, however, due to abuse, it isn’t used for that purpose anymore. In fact most search engines ignore most meta tags at this point – that doesn’t mean that it isn’t important, it’s just not for that purpose.
An internal intranet might read the information and provide information for others when the page is read and indexed, as might other tools.
<link>
The link tag is another self contained tag. It contains information which links to an outside resource. The most common of which is your CSS style sheet(s). Note that each link tag will reference only one external source.
A link tag has two required attributes, rel and href.
<link rel="stylesheet" href="css/styles.css" type="text/css">The rel specifies what type of link this tag is being used for, the most common value being “stylesheet”. You can have multiple stylesheets on a single page. Each stylesheet will need its own link tag.
The href, or hyperlink reference, attribute specifies where the file can be found. This can be a locally referenced file or absolutely referenced file. In the example below you see that the styles.css is referenced and under a folder called css.
Since many web servers are case sensitive, I recommend that you always assume that they are, and keep the file names the same case. Additionally, I recommend making all file names all lowercase, to reduce confusion.
<script>
The script tag is used to insert JavaScript into a page. This can be either inline, and the JavaScript code will be between the tags, or referenced by an external file.
Now you shouldn’t actually put your script tags within the head tag as JavaScript is a blocking tag. And like a blocking call in a threaded program, it will prevent other files from downloading and displaying until the JavaScript is downloaded and processed.
Ideally, JavaScript should be placed at the bottom of the web page. However, old school convention was to place JavaScript in the head, and a lot of people still do this.
Luckily for us there is a new async attribute which means the file doesn’t block as it’s downloaded.
The Webpage Head was originally found on Access 2 Learn
