People say the best things about a person can only be seen from within and that applies to HTML webpages too! The reasons why some webpages can't be seen on search engines, is because they lack the features that give them visibility.
Human souls, can't be seen on our plane, that doesn't necessarily mean they don't matter. Which is why today I will help you improve your understanding of the soul of HTML webpages, the head section.
In my previous article in the Introduction To HTML, I used the head section in my simple webpage and had a brief discussion about it.
Heads in HTML webpages can act as the gate between a webpage, a search engine, and a user. Headers contain lots of data about the data displayed in webpages. We call this data, metadata.
This metadata can be used to describe the title of a webpage, the styles, the scripts, the links, the character set and other kinds of meta information.
The Title
The title value can be used to define the title of a HTML webpage, it's placed within the title tag
<title></title> and only one title can exist per page.
Uses:
- The title can be displayed in search results when a search engine brings up the webpage. -The title can be viewed in the browser tab
- The title will also be used to identify your page, whenever a user adds your webpage to his/her favourites
The Styles.
CSS (Cascading Style Sheets) are used to control the characteristics/appearance of the elements in the body tag. The style tag is used to contain the CSS instructions for the webpage.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<style>
h1 {color: red;}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
The Links
There are some cases where the style tag becomes filled up with a lot of CSS code. This may cause the page to look bulky and reduce its readability. Links are tags that link external stylesheets to our webpages. So you can create an external stylesheet, "style.css" and link it to your webpage
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<link rel="stylesheet"
href="style.css">
</head>
</html>
The Script
Scripts are used to insert JavaScript code into webpages. JavaScript is a type of programming language that can make webpages to be dynamic and interactive. The 'script' tag is used to either add client side JavaScript or an external JavaScript file.
Client Side JavaScript file
<!DOCTYPE html>
<html>
<head>
<script>
function display() {
alert('Hello World');
}
</script>
</head>
<body>
<button type="button"
onclick="display()">
Click me
</button>
</body>
</html>
External JavaScript file
<!DOCTYPE html>
<html>
<head>
<script src="index.js">
</head> </html>
The Base
Base tags are used to specify base urls for webpages. Every page has a domain name attached to it for accessibility. Inserting, 'https://mywebsite.com' to every relative link will be heinous. So base urls make it easier by handling the url and attaching it to every relative link automatically .
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base
href="https://mywebsite/images/"
target="_blank">
</head>
<body>
<img src="image.png">
</body>
</html>
Conclusion
We covered five tags in the head section namely:- title, styles, script, link, and base.
In my next article will expand on meta tags and their variants. Thank you for reading down to this level, please give me a like and comment to support my work.
Follow my Medium to get more information about Web Development
Let's go!
.
Top comments (0)