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
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>
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.
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>
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.
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.
Listing 3: Script of Adding Script Tag
Figure 3: Above figure is output of script tag, which adds dynamically form items.
Non Script Tag:
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
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>
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.