What is head in HTML and HTML tags?

Ads by Google
What is head in HTML and HTML tags

In this course we are studying WEB development. Todayn we will learn “what is head in html, what it is used for”. Head of the HYML plays a major role on improve the SEO.

What is <head> in HTML

<html> and <body> tags are separated by the <head> element, which is a container for metadata (info about data).

The term “metadata” refers to information about the HTML document.

The document title, character set, styles, scripts, and other meta information are also called metadata.

<head> element can include the following elements:

  • <title>
  • <style>
  • <base>
  • <noscript>
  • <link>
  • <meta>
  • <script>

The <head> tag also supports the Global Attributes in HTML..

Boilerplate of HTML used for web development.

Ads by Google

<title>

Title of the document is define as title tag. The title must be text-only and appear in the title bar of the browser or in the tab of the page.

In HTML texts, the title tag is necessary!

<!DOCTYPE html>
<html>
<head>
  <title>How to lear web development</title>
</head>
<body>

</body>
</html>

For search engine optimization (SEO), the contents of a page title are crucial! Search engine algorithms utilise the page title in a way to determine the order in which pages are listed in search results.

How to make money from YouTube fastest trick

<style>

<style> gives color style. Generally we do professional styling via HTML

<html>
<head>
  <style>
    h1 {color:red;}
    p {color:blue;}
  </style>
</head>
<body>

<h1>Hello World</h1>
<p>A paragraph.</p>

</body>
</html>

<base>

 Tag <base>specifies a default URL and target for all links on a page.

<html>
<head>
  <base href="https://www.techinfohelp.com/" target="_blank">
</head>
<body>
<img src="https://www.techinfohelp.com/wp-content/uploads/2021/12/Boilerplate-Of-HTML-Used-For-Web-Development.jpg" width="100" height="100" alt="Stickman">
<a href="front-end-web-development-full-course/">HTML base Tag</a>
</body>
</html>

Here we used base link as the common base link for all the links used that we will use in body of html.

What is <img src=”xyz” > see its different use and modification affect in our next chapter.

<noscript> and <script>

The <noscript> element specifies an alternative content for users who have scripts deactivated in their browser or who are using a browser that does not support script.

Both the <head> and <body> elements can contain the <noscript> element. The <noscript> element could only include <link>, <style>, and <meta> elements when used inside the <head> element.

<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

A client-side script is embedded using the <script> element (JavaScript).

The src property of the <script> element either includes scripting statements or connects to an external script file.

Image manipulation, form validation, and dynamic content changes are all common uses for JavaScript.

<link>

The <link> tag establishes a connection between the current page and a remote resource.

To add favicon to your website or to link to external style sheets we use <link> tag.

The <link> element is a blank element with just properties.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<meta>

Metadata about an HTML document is defined via the <meta> element. Metadata is data about data (information).

<meta>we use <meta> tags to indicate character set, page description, keywords, document author, and viewport settings. They are always placed inside the <head> element.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web Development course">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Snahal">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Browsers (how to show content or reload page), search engines (keywords), and other online services all employ metadata.

The <meta> element provides a way for web designers to manage the viewport (the viewable area of a web page to the user) (See “Setting The Viewport” example below).

Summary

We have discussed about the most useful tags and its uses in this article have a look in FAQs.

FAQs

What is <meta> in html


<meta> tags are used to indicate character set, page description, keywords, document author, and viewport settings. They are always placed inside the <head> element.

How to embed CSS and JS file in HTML


We can add .css and .js file in head for css it will be like
<link rel=”stylesheet” href=”styles.css”>
for Js it will be like
<script src=”file.js”></script>

How to add image and alt artibute?


<img =”image.jpg” width=”100″ height=”100″ alt=”This is an image”>

How to add image linking to another web page?


<a href=”www.techinfohelp.com”><img =”image.jpg” width=”100″ height=”100″ alt=”Image”></a>

How to add link which opens in new tab?


<a href=”www.techinfohelp.com” target=”_blank”>Click here</a>

Ads by Google

Leave a Comment

Your email address will not be published. Required fields are marked *

Tech Info

Share
Share
WhatsApp
More