The Html Head Element
In this lesson, we’ll discuss the Html head element. Up to this point, we’ve only been using the head element to hold our title element. The Html head element is placed after the opening <html> tag and before the opening <body> tag. It is very important for many things. All of the background information about the website/web page that doesn’t get displayed goes in the head element. This is the location for all of the web page’s metadata. Metadata in simplest terms is data about data. Some metadata tags that go inside of the Html head element are: <title>, <style>, <link>, <meta>, <script>, and <base>. Each of these tags has multiple purposes. They can be used for things like the page title, description, keywords, links, scripts, and more. Let’s discuss some of the important meta tags that go inside of the head element.
The Html <title> Element
The title ELEMENT defines the title of the document. HTML and XHTML required you to have a title element in all documents. This title will display in the browser tab, search engine results, and in the favorites menu when a user bookmarks the page. There can only be one title element in any document, and it should give a broad idea of what type of content is in that document. The title should be less than 64 characters. While there is no limit to how long the title can be, having a title that is around 64 characters or less will benefit you the most in search engines and other areas without it being so long that parts of it are clipped. NOTE: Spaces are also counted as characters.
index.html EXAMPLE 1: THE TITLE ELEMENT
The Html <style> Element
The style element is used to define styles for the web page it is used in. We use the style element to add CSS code that will affect the document we’re currently working on. This is known as an INTERNAL STYLE SHEET. A single Html document can contain multiple style elements. See the images below for an example.
index.html EXAMPLE 2: THE STYLE ELEMENT
DISPLAYED PAGE EXAMPLE 2
In the above DISPLAYED PAGE EXAMPLE 2 image, the title can be seen in the upper left corner on the browser tab. Although you might not be able to make out the text; you can see one of the locations of the title element’s text.
The Html <link> Element
The link element is used to link to EXTERNAL STYLE SHEETS. A CSS external style sheet is saved as a .css document. See the images below.
index.html EXAMPLE 3: THE LINK ELEMENT
my-styles.css EXAMPLE 3: THE LINK ELEMENT
The link element is added to the index.html document in the above example. It contains ATTRIBUTES and there is no content. The rel attribute specifies the relationship between the document and the external resource that is being linked to. Type defines the type of content that is being linked to and href specifies the URL of the linked resource. In the example, the href URL is my-styles.css. You can see the my-styles.css document in the image above. The CSS document contains the same styles that were used in example 2, so there is no change in the “displayed page”. The index.html document is applying the styles that are being linked from the my-styles.css stylesheet. NOTE: that we do not use style tags in the CSS document. In the Html example above, the link is not closed. But in XHTML, it must be closed. XHTML stands for “Extensible HyperText Markup Language”. It is almost identical to Html, but the coding is more strict. There can be multiple link tags in an Html document.
The Html <script> Element
index.html EXAMPLE 4: THE SCRIPT ELEMENT
DISPLAYED PAGE EXAMPLE 4.1: BEFORE BUTTON IS CLICKED
DISPLAYED PAGE EXAMPLE 4.2: AFTER BUTTON IS CLICKED
The Html <base> Element
To specify a base URL and target for every relative URL in a web page, we can use the base element. Target is the attribute used to specify if a link will open in a new tab, window, frame, etc. See the image below for an example.
index.html EXAMPLE 5: THE BASE ELEMENT
The example above does not use a valid URL for the image folder and is just for visual purposes. The base element in the head is specifying a base URL, which is the “images” folder at clearcodedprogramming.com. Now all images that are stored in the images folder for this web page would be loaded by simply adding the image name in the src attribute. This would be very useful for an image gallery. Moving on to the link that was added inside of the P ELEMENT; this link would open up in a new window because the base element has a target attribute with a _blank value. Only one base element can be used for each document. The base element must be closed in XHTML documents. It’s a good idea to add the base element as the first element inside of the head. This way, other elements in the head section could use the information from the base element because Html documents are read from top to bottom.
The Html <meta> Element
The final thing we’re going to touch on in this lesson is the meta element. The meta element is used for many things including page descriptions, author, keywords, and more. It is used to specify important metadata that is used by browsers, search engines, and other web services. See the image below for a few examples. Remember metadata does not get displayed.
index.html EXAMPLE 6: THE META ELEMENT
When it comes to meta elements, there are many things to consider. Some meta elements will benefit your web page while others will not. Each meta element has different rules or good coding practices to go by. When it’s time to add some metadata to improve your SEO (Search Engine Optimization) and page rank in search engines, you should take your time and add the most valid and beneficial information. The meta element is a subject that we’ll dive into a little deeper in some future lessons. That wraps up this Html head element and metadata tutorial. Hopefully, you have a good understanding of how the Html head element is used for important background information about your web page, and what types of metadata can be used. Thanks for reading, we’ll see you next lesson.
posted by Clear Coded Programming