September 5, 2016

Head Element And Metadata

html head element and metadata

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 pages 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

html head element with 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

html head element with style element

DISPLAYED PAGE EXAMPLE 2

head element with style element display

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

html link element

my-styles.css EXAMPLE 3: THE LINK ELEMENT

link element CSS

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

The script element defines client-side scripts (Javascript). It can be used in two ways–either the script tags hold scripting statements or it points to an external script file. The src (source) attribute is used to point to the external file. Javascript is used for many things in web development like form validation, manipulating images, and dynamic content. FYI, The <noscript> tag defines an alternate content for browsers that don’t support Javascript. Javascript enables web developers to create dynamic and interactive websites. See the image below for an example script.

index.html EXAMPLE 4: THE SCRIPT ELEMENT

html head element and scripting statement

DISPLAYED PAGE EXAMPLE 4.1: BEFORE BUTTON IS CLICKED

html head element and script tags

DISPLAYED PAGE EXAMPLE 4.2: AFTER BUTTON IS CLICKED

html head element and script element function

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

html head element and 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

html head element and meta element meta author, meta description, meta keywords

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.

Clear Coded Programming

Please Leave a comment