Good day to all. Last time we knew what composes the <head> element. Now let's discuss about the <title> tag.
<title> tag is required in all HTML documents and it defines the title of the document.
The <title> tag element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
<html>
<head>
<title>A title</title>
</head>
<body>
Some contents here...
</body>
</html>
And let's take a look to the result:
Have you notice almost all websites also include an image or commonly called as their logo in the title bar? I'm sure you are wondering now how to add a logo to our html document.
Now lets talk about it. This can easily be achieved through this code snippet below.
<link rel="shortcut icon" href="path/to/your/image" type="image/png" />
- The rel attribute of <link> tag specifies the relationship between the current document and the linked document/resource. More info.
- The href attribute of <link> tag specifies the location (URL) of the external resource (most often a style sheet file but in this tutorial it is an image). More info.
- The type attribute of <link> tag specifies the Internet media type (formerly known as MIME type) of the linked document/resource. More info.
<html>
<head>
<title>Title with icon</title>
<link rel="shortcut icon" href="images/icon.png" type="image/png" />
</head>
<body>
Some contents here...
</body>
</html>
That will output something like image below:
Hope you learn new today. On the next post, we will tackle about the next tag. It is the <style> tag. Thank you for visiting.
Courtesy to:
- W3schools for the <title> tag definition, usage and attributes of the <link> tag.
- CodeFormatter for the nice pre element.
No comments:
Post a Comment