HTML Elements (HEAD)

HTML Elements (HEAD)

Hey reader so, in my past few blogs we learned about the very basics of HTML and also learned a lot about how to write the HTML syntaxes, what I mean was their structure. So let’s do a quick recap at first, we learned about elements, tags, and attributes and we also learned about how an HTML document works. Moving forward, check out the following syntax structure so that we can move forward and learn about using tags.

So, what are we waiting for let’s start ……

Sorry in advance if I scare you in between

Ok, so if you all remember while studying the basics of HTML, we also studied the structure. If you remember the structure then you must remember that there was an element before the body element which is called the head element, I even gave a reference about it when we learned about the title tag as well.

So, the head element is a container element where many other elements are used as well. We call it a container because this tag doesn’t have any role of its own but it is still used with every HTML document to store the metadata about the HTML document. In order to add the metadata, we add other elements to it too.

(NOTE: metadata means it gives us the basic info, the pre-requisites we want to add, and everything we should know about the HTML file)

Some common elements we add inside the head element are —

1. Title —

The title element defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab. The page title is used by search engine algorithms to decide the order when listing pages in search results.

Syntax -

<title>A Meaningful Page Title</title>

2. Link —

The <link> element defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets(We will learn about stylesheets in later blogs).

3. Meta —

The meta element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. This element does not display anything on the screen, it is used by browsers, search engines, and many other web services. It is an empty tag.

Syntax -

<meta>

Now let’s mention some more attributes and syntaxes used to perform some functions —

• <meta name=”keywords” content=”keyword1,keyword2,keyword3"> — Here, we have used this syntax to provide keywords for search engine, it can any number of keywords. Here name attribute is used to specify the type of metadata to be used and the content for the meta data.
• <meta name=”description” content=”Free Web tutorials”> — Here, we have used this syntax to provide a description of our web page. Here name attribute is used to specify the type of metadata to be used and the content for the metadata.
• <meta name=” author” content=” John Doe”> — Here, we have used this syntax to specify the author of our HTML document. Here name attribute is used to specify the type of metadata to be used and the content for the metadata.
• <meta http-equiv=” refresh” content=” 30"> — The http-equiv attribute provides an HTTP header for the information/value of the content attribute. The http-equiv attribute is used by servers to gather information about a page using the HTTP header. The meta tag’s http-equiv attribute set is similar to a http header. The attribute lets you to send additional information to the browser in the http header. In this we have mention refresh and content 30 which means that after every 30 seconds the page will be refreshed. Something similar, we have more values, take a look at them.

• <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> — This syntax is used to help the adjust the display on a user’s screen. The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen. 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 browser first loads the page.
• <meta charset=”UTF-8"> — Here, we have used this syntax to define the character set which is allowed and can be used in our HTML document.

Without much elaborating further, in simple words, Charset defines a set of characters(numbers, symbols, alphabets) that are allowed and can be used in our HTML document. There are several charset types, but for HTML5 we will be using only UTF-8(Unicode Transformation Format-8). As a developer, it is always suggested to use UTF-8 as it covers most of the characters compared to others and it is supported by HTML4 and HTML5.

Here is an example of the entire head tag,

So, that’s it I know it was a pretty short blog but trust me I covered most of it that are required for you to know about the head tag in HTML. My upcoming blogs will cover more such topics which I am pretty sure will trigger your knowledge a lot. Also, pardon but I think soon enough I will be starting writing blogs on DSA topics too, though not sure about it, let’s see what the future holds for me oops sorry us.

Thank you for reading and happy coding !!!