HTML document heading

HTML/HTML document heading

The head tag contains special tags that define the document properties. It's always written before the body tag, right after the opening HTML tag:

<!DOCTYPE html>

<html>

<head>

...

</head>

...

</html>

We never use attributes on this tag. And we don't write content in it. It's just a container for other tags. Inside it, we can have a wide variety of tags, depending on what you need to do like:

Title tag

The title tag determines the page title and summarizes your page contents. The title is displayed in the browser, and it's especially important as it's one of the key factors for Search Engine Optimization (SEO). Google’s algorithm recognizes the title as a major sign of the page’s purpose and relevance.

Script tag

This HTML tag is used to add JavaScript to the page. You can include it inline, using an opening tag, the JavaScript code, and then the closing tag:

</script>

Or you can load an external JS file by using the src attribute

There is something pretty important to know about this tag. Sometimes this tag is used at the bottom of the page, just before the closing </body> for the reason of performance. Loading scripts by default block the rendering of the page until the script is parsed and loaded. By putting it at the bottom of the page, the script is loaded and executed after the whole page is already parsed and loaded, giving a better experience to the user than keeping it in the head tag.

noscript tag

This tag is used to define a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. It is used differently depending on whether it's put in the document head or the document body. We're talking about the document head now, so let's first introduce this usage. In this case, the noscript tag can only contain other tags like link tags, style tags, and meta tags

Note: users can choose to disable JavaScript scripts in the browser settings. Or the browser might not support them by default.

link tag

The <link> tag sets the relationship between the current document and the external resource. It is generally used to link to the external CSS stylesheet. This element has no closing tag.

<!DOCTYPE html>

<html>

<head>

...

...

</head>

...

</html>

The media attribute allows the loading of different stylesheets depending on the device capabilities:

We can also link to resources other than stylesheets. For example, we can associate an RSS feed using

Or we can associate a favicon using:

href="/assets/Samsung-touch-icon.png"

href="/assets/favicon-32x32.png"

style tag

The <style> HTML element contains used to add styles to the document or part of a document, rather than loading an external stylesheet. It contains CSS, which is applied to the contents of the document containing the <style> element.

<style>

color: red;

font-size: 18px;

}

</style>

base tag

This tag is used to set a base URL for all relative URLs contained on the page. It does not have the closing tag.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

meta tag

The <meta> tag defines metadata about an HTML document. Meta tags perform a variety of tasks and they are very, very important. <meta> tags always go inside the <head> element, and are typically. It’s used to specify the character set, page description, keywords, author of the document, and viewport settings. It’s especially for SEO.

Let’s see some example

Used to define keywords for search engines.

Used to define the description of your web page.

Used to define the author of a page.

Used to refresh web documents every second.

Used to tell the browser to set the page width based on the device width.

HTML

HTML document heading

Leave a comment

No Cmomments yet