The HTML codes you’ve seen so far in the previous lessons started with a doctype (short for Document Type Declaration) element which simply states the HTML version the current web page is written in. After that, all the codes are written inside html element.
HTML document tree
If you resemble an html page with a tree, then the html element is the root of all the remaining elements. Actually, with the <html> tag, HTML documents starts and ends at </html> tag. The html element only has two branches – head element and body element. See the following picture-
Here, html is the root element and head and body are the child elements of the html element.
If we consider html element, head element, and body element as sections, then we can draw the following picture-
In this lesson, we’ll discuss about the head element.
What is head element?
head element contains information about the current document. This information is not displayed in the main browser window. This element may include title, keywords, description of the page, references to the other resources that help to stylize the page or to add interactivity to the page.
Child elements of head element
head element may include the following elements-
- base element
- link element
- meta element
- script element
- style element
- title element
1. base element
When your document uses many links with same root URLs, then you can save some typing mentioning the root URL in base element. After defining the root URL in the base element, any relative URL you use later in the document will be added after it. See the following example-
<!doctype html>
<html lang="en">
<head>
<base href=”<a href="http://www.schoolsofweb.com/">http://www.schoolsofweb.com/</a>” target=”_blank” />
</head>
<body>
<a href=”category/html-for-beginners/”>HTML for Beginners</a>
</body>
</html>
As you see, the base element can have href and target attributes. href attribute specifies the root URL and target attribute specifies whether the link opens in the same window or in different window after clicking a link. The URL in line 7 is a relative URL, so the base URL will be added with it and the final URL will be http://www.schoolsofweb.com/category/html-for-beginners/.
Few things about base element-
- Only one base element is allowed in one html document
- base element should be included before any element which uses URL as attribute as it may affect on those URL too.
2. link element
The link element allows the current document to link to the other resources. This element is widely used to link with external style sheet which styles html pages.
Example:
<!doctype html>
<html lang="en">
<head>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css” />
</head>
<body>
</body>
</html>
In the above example in line 4, link element is used. Here, href attribute specifies the path to the external style sheet styles.css, rel attribute specifies the relationship (which is stylesheet) between the referring HTML file and the linked file.
3. meta element
meta element provides information about the current HTML page. This information is not displayed in the browser window but important for browsers, web servers, and search engines.
Uses of meta element:
Application-name:
To indicate which web application this page is part of-
<meta name=”application-name” content=”HTML5 for beginners”>
This web page is part of ”HTML5 for beginners” web application
Author name: To mention the author name of the current web page-
<meta name=”author” content=”Neil Fin”>
Neil Fin is the autor of this HTML page.
Description: To add the description of the current HTML page-
<meta name=”description” content=”this page is for learning head element”>
This line tells beiefly about the current web page.
Generator: To specify the software from which the page is generated.
<meta name=”generator” content=”Wordpress”>
This page is generated from wordpress
Keywords: To mention the keywords of this web page.
<meta name=”keywords” content=”head element, HTML, HTML5”>
The keywords of this page are head element, HTML, HTML5
Robots: To specify information for search engine robots how this page should be treated.
<meta name=”robots” content=”noindex, nofollow”>
This tells robots not to index this page and follow any link in this page.
Revised: To mention the last time the page was updated.
<meta name=”revised” content=”Monday February 27th, 2014, 10:00am”>
Last time the page was updated is 27th February 2014 on 10 am
Character set: To tell the browsers which character set to use to interpret the current HTML page.
<meta charset=”UTF-8” />
It tells browser to use UTF-8 character set.
Default-style: To mention which style sheet to be used as default.
<meta http-equiv=”default-style” content=”master css”>
<link rel = “alternative stylesheet” href=”css/style.css” title=”master css” />
<link rel = “alternative stylesheet” href=”css/style-form.css” title=”form css” />
It tells browsers to use style.css stylesheet as default stylesheet.
Refresh: To indicate after how long the current web page should be reloaded.
<meta http-equiv=”refresh” content=”30”>
It tells the current web page should be reloaded after every 30 seconds To know the more explanation of the above codes, see HTML Meta Tags.
4. script element
script element is used to either embed a scripting language directly in the HTML page or to add the reference to an external script in the HTML document. Javascript is the most widely used scripting language. Those animation effects, nice pop-ups, form validation alerts etc are written in Javascript. If you’re a newbie, we have an in-depth beginners javascript course (coming soon). The following code is for embedding javascript in the HTML document-
<!doctype html>
<html lang="en">
<head>
<script type=”text/javascript”>
alert(“Hello! I’m a Javascript alert box.”);
</script>
</head>
<body>
</body>
</html>
The following code is for referencing an external scripting file named javascript.js.
<!doctype html>
<html lang="en">
<head>
<script type=”text/javascript” href=”js/javascript.js” />
</head>
<body>
</body>
</html>
5. style element
style element is used to embed CSS styles directly in the HTML page. In the link element section above, you’ve seen the link element is used to add an external style sheet document. The styles written on that CSS file will affect the elements in the HTML file. On the other hand, using style element, styles are written directly in the HTML page. See the example below.
Example-
<!doctype html>
<html lang="en">
<head>
<style type=”text/css”>
body{background-color:red; color:white;}
</style>
</head>
<body>
<p>style element is used to embed CSS styles directly to the HTML page.</p>
</body>
</html>
In the example in line 4 to 6 we added a style element. If you run the code above you’ll see a red colored page with white text. We write the CSS for these in line 5. In line 4, the type attribute (which is optional) of the style element tells browser that the text inside in this element is CSS.
6. title element
Each web page has a title or name and title element is used to write this title text.
Example:
<!doctype html>
<html lang="en">
<head>
<title>HTML Head</title>
</head>
<body>
<a href=”category/html-for-beginners/”>HTML for Beginners</a>
</body>
</html>
The title of the above HTML page is “HTML Head”.
Title text written inside the title element can be seen in the following places-
- Title bar of the browser
- Result pages of search engine
- Visitor’s browser history list
- Bookmarking list
When writing the title keep the following things in mind-
- Title should express properly what the web page is about. It should be informative but concise, and to the point.
- To avoid cutting off the title to display in the search result, keep it under 60 characters including spaces.
- Use only standard texts as title.
- If you want to use any special characters in the title, make sure character set of that character is declared before title element using meta element.
- Don’t use any nested element inside title element.
- Don’t use same text in every page title of your website, use different text instead.
| Next Lesson : HTML Styles >> |