#18 HTML - The Head Element
Like Avenger have Hulk. Then we have <head> in HTML. tag is container for <title>, <style>, <script>, <link>, <base>, and <meta>
The HTML Tag
The <head> tag is a container for metadata (data about data). It is placed after <html> and before <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed in web page.
Metadata typically defines the document title, character set, styles, scripts, and other meta information.
Note: Today I will put only code and you have to try it all in your system. It’s the 18th tutorial right. So try
The HTML Tag
The HTML <title> tag is used for specifying the title of the HTML document. Which is display in the browser tab. Following is an example to give a title to an HTML document
Try and check title in browser tab.
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document....
</body>
</html>
The HTML Tag
The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, viewports settings, page author, list of keywords, page description, etc.
Meta tags are also useful in SEO (search engine optimization).
Following are some of the important usages of <meta> tag inside an HTML document.
try this example, actually it will not displayed but they affect the website.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
<!-- Setting the viewport to make your website look good on all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Let’s see about viewport
The viewport is the user’s visible area of a web page. It varies with the different device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
Without the viewport meta tag
With the viewport meta tag
The HTML
The HTML tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item.
For example, all the given pages and images will be searched after prefixing the given URLs with base URL http://www.codesnail.com/ directory
example
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.codesnail.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html-tutorial/" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
The HTML Tag
The is used to define relation between in the current document and external resourse.
I’m sure 99.99% you will use this tag to link external CSS file to HTML file. We will discuss in CSS tutorial.
if you want try, we will also discuss in css tutorial
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<!-- external css -->
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
The HTML
We already seen this tag in various tutorial right. I know I never explained but here’s the explanation.
The HTML <style> tag is used to specify the style sheet for the current HTML document (also known as internal style sheet). Following is an example to define few style sheet rules inside
try this example
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
The HTML
The HTML <script> tag is used to include either an external script file or to define an internal script for the HTML document.
Following is an example where we are using internal JavaScript to define a simple JavaScript function. We will see about the external script in the JavaScript tutorial.
try example
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
Hope you enjoyed. Happy coding :)
Previous: #17 HTML iFrame