Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Tags under HTML Head Section with Examples

In this article I will cover the HTML head section and tags within this section. I will discuss how to use the different tags and write some examples to demonstrate the functionality.

Title: Tags under HTML Head Section with Examples

Introduction:

The <head> is first and very basic structure of HTML. This is used for describing or keeping some kind of technical data or some other data of web-page. This data will never display on screen. Within <HTML>, the document has two sections to it: <head> and <BODY>. <head> is like the cover box of electrical circuit. Just as the cover box of an electrical circuit contains information about the internal structure (such as the all connections, current flow diagram, voltage flow diagram etc), the <head> section contains information about the entire sections. This information is communicated through the <TITLE> tag (which is required only title tag which appears on page) and the <LINK ...> and <META ...> tags. <BODY> tags is just like and all content of circuit box (All rules of current and voltage, Wire, Capacitor, IC chips etc)

these are the list of tag which comes under HEAD tag which will be explain in present tutorial individually.

  • Title tag
  • Meta tag
  • Script tag
  • Non Script tag
  • Base tag

Title Tag:

The <title> tag defines the title of the document. Title of document defines the title in browser toolbar, provides the title to the page when it loads or when you bookmark any particular page title appears, following example will clear this theory.

Listing 1: Script of Title Tag

<!DOCTYPE html>
<html>
<head>
<title>This is the title of the document </title>
</head>
<body>
<form name="boxform" action="mailto:john_john@XYZ.com" method="post">
   <input type="checkbox" /> Checkbox <br />
   <input type="text" /> Text Field <br />
   <input type="submit" value="SUBMIT" />
<input type="submit" value="cancle" />
</form>
</body>
</html>
example of title tag script which shows the title bar of page “this is the title of the document and bookmarks name as explained in theory.

Figure 1: above figure is example of title tag script which shows the title bar of page “this is the title of the document and bookmarks name as explained in theory.

Meta Tag:

The <meta> tag generally requires the content attributes and name to be working together to present your web page in a better way. Meta tags are used to pass the information or technical data for search engines that will not be seen by the end user. These invisible modules provide a flag for search engines to follow search technique or investigate and will then present that data.

The<meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, it will be only readable by emulator or machine. Page description, keywords, author of the document, last modified and other metadata is few terms, which is specified by meta elements. The metadata can be used by browsers, search engines (keywords), or other web services.

Listing 2: Meta Tag Script

<!DOCTYPE html>
<html>
<head>
<meta name="successful" content="Birthday: 1/1/2013" />
</head>
<body>
This is body section of program and you are learning <meta> tag description. 
</body>
</html>
Above figure is output of <meta> tag script which is used to set specific characteristics of the web page and provide information to readers and search engines

Figure 2: Above figure is output of <meta> tag script which is used to set specific characteristics of the web page and provide information to readers and search engines.

Script Tag:

This tag is used to include client side script in HTML. Basically script (clients script) is a program that may bunch up an HTML document .The script runs when it loads on client machine like emulator or browsers. HTML's support for scripts is independent of the scripting language.

The script element either contains scripting statements (JavaScript/VBscript/CSSscript) or it links to another script by src attribute. The purpose for adding JavaScript in HTML is image manipulation, form validation, and dynamic changes of content. Listed example will shows you the correct way of defining the script tag and a proper script.

Listing 3: Script of Adding Script Tag

<HTML>
<HEAD>
<TITLE>  Script example in HTML </TITLE>
<SCRIPT language="javascript">
function add(type) {
var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
   var add = document.getElementById("addBar");
    add.appendChild(element); 
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H5> This demo example contains script of dynamic addition of check box, button, text box and radio buttons through drop down menu in a form</H5>
Select the options in drop down menu.
<br/>
<SELECT name="element">
    <OPTION value="button">Button</OPTION>
    <OPTION value="text">Textbox</OPTION>
    <OPTION value="radio">Radio</OPTION>
    <OPTION value="checkbox">checkbox</OPTION>
    </SELECT>
 <INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
 <span id="addBar"> </span>
 </FORM>
</BODY>
</HTML>
Above figure is output of script tag, which adds dynamically form items.

Figure 3: Above figure is output of script tag, which adds dynamically form items.

Non Script Tag:

There is one more tag falls under head tag like script tag: The NOSCRIPT tag, it defines the content that is displayed when a browser arise an issue to project preceding script. The NOSCRIPT tag makes JavaScript and other browser-side scripting languages accessible to user-agents that cannot load scripts, or have scripting turned off.

For example, If you Google chrome are not supporting script to run. Then it will show you output to your screen.

Listing 4: NoScript Example

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("B")
document.write("C")
document.write("D")
document.write("E")
document.write("F")
document.write("G")
</script>
<noscript>
  JavaScript is required to access this part of the page. Please enable JavaScript.
</noscript>
</body>
</html>
Above figure is output of a no scripted html program. In which a browser without support for JavaScript will show the text in the no-script element.

Figure 4: Above figure is output of a no scripted html program. In which a browser without support for JavaScript will show the text in the no-script element.

Base Element:

the <base> tag specifies the base URL/target for all relative URLs in a document. It provides a method for defining the base URL for all links and form submissions on a page. It also provides a common target (in the form of a named window) for all of these links or form submissions. The <base> tag goes inside the <head> element. Following script will clear the concept

Listing 5: Script of Base Tag

<html>
<head>
<base href="https://www.facebook.com">
<title> This is title of document</title>
</head>
<body>
<h2>HTML BASE TAG EXAMPLE </h2>
 <a href="/pages/mark-zuckerber/218605514865338/"> HTML base tag example</a>
</body>
</html>
Above figure is script of base tag in which facebook home page is added as a reference link and one more links is added as a forwarding link

Figure 5: Above figure is script of base tag in which facebook home page is added as a reference link and one more links is added as a forwarding link.

Conclusion

This tutorial covered the all basic tags, which comes under HEAD tag. Hope it given you an overview of tags used under the HTML head tag. There are also some more tags, which can come under the head tag like Link and Style; you can explore these tags also. If you have any queries please comment at Mrbool site.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login