Now, let’s see what elements fit into the head section of a HTML document (web page).
<title> Tag
The <head> element of a HTML document contains various other elements. Among them the title tag (<title>) is used to assign a title to the HTML document (web page). For example, to display the title of the web page as Homepage, the title tags are used as follows:
<title>Homepage</title>
The title of the web page is displayed on the titlebar of a browser. The title of a web page is also used in various other places like: it is used as the title of the bookmark and also used as the main text in a search result displayed by the search engine.
<meta> Tags
The <meta> tags are written inside <head> tags which are used to provide information and commands to a web browser. As the name implies, the <meta> tag contains the meta information for the document like the author name, software used to create the web page, description of the page etc…
The amount of information that can be specified using the <meta> tags is extensive. When the HTTP-EQUIV parameter is used in the <meta> tag, it can replace or supply the HTTP header information. For example, the following <meta> tag defines the content type of the document as HTML with the Latin character set (ISO-8859-1).
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
The <meta> tags can also be used to specify how long the page should be cached (if cached at all). Let’s seen an example:
<meta http-equiv=”pragma” content=”no-cache” />
The <meta> tags can also be used to specify the browser to refresh the page at regular intervals. Let’s see an example:
<meta http-equiv=”refresh” content=”3” />
Above line can be modified to achieve the redirection functionality by specifying a the URL of the target page after the number of seconds as shown below:
<meta http-equiv=”refresh” content=”3;http://www.newsite.com” />
Some browsers may treat no-cache differently. To overcome this ambiguity, we can use the expires meta tag as shown below:
<meta http-equiv=”expires” content=”0” />
The above tag causes the page to be expired immediately in the cache and therefore not cached at all.
Along with the information mentioned above, the <meta> tags can also be used to specify data to the search engines like the description of the page, keywords etc. Consider the following example:
<meta name=”description” content=”A tutorial on HTML” />
<meta name=”keywords” content=”html tutorial, html examples” />
<base> Tag
While specifying the URL’s in the web page, we can use either absolute paths or relative paths. It is a good practice to specify the absolute path which includes the protocol (like http, ftp etc…). But it is impractical for referring the local resources.
While referring local resources, it is beneficial to use relative paths. A relative path is usually calculated with respect to a base directory or domain. To specify this base domain or directory, HTML provides the <base> tag. Let’s see an example:
<base href=”http://www.example.com/images/” />
Now, to include a local (on www.example.com) resource like an image in a web page, we can write:
<img src=”image001.jpg” />
Eventhough we are specifying only the image file’s name in the above example, the absolute URL is http://www.example.com/images/image001.jpg.
<script> Tags
HTML documents can include scripting sections. Such sections typically contain JavaScript scripts, but other types of scripting (for example, VBScripting) can also be used.
All scripting in a document should appear between <script> tags. These <script> sections can be placed in the document head section or anywhere in the body. The <script> tags should adhere to the following format:
<script type=”text/javascript”>
Scripting code here...
</script>
<style> Tag
The <style> tag is used to specify the style information for the elements in a web page. The <style> tag in the head section provides embedded CSS (Cascading Style Sheet). We will learn more on this <style> tag in CSS.
<link> Tag
The <link> tag is generally used to link the HTML document with an external CSS document. The styling information for the elements will be available in an external CSS file. This file is linked with the HTML document (web page) by using the <link> tag. Consider the following example:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Suryateja Pericherla, at present is a Research Scholar (full-time Ph.D.) in the Dept. of Computer Science & Systems Engineering at Andhra University, Visakhapatnam. Previously worked as an Associate Professor in the Dept. of CSE at Vishnu Institute of Technology, India.
He has 11+ years of teaching experience and is an individual researcher whose research interests are Cloud Computing, Internet of Things, Computer Security, Network Security and Blockchain.
He is a member of professional societies like IEEE, ACM, CSI and ISCA. He published several research papers which are indexed by SCIE, WoS, Scopus, Springer and others.
Leave a Reply