<header> Tag in HTML

What is <header> Tag?

The <header> element define a page or section header. A logo, a search bar, links for navigation, etc., are often included.

This tag doesn't introduce a new outline section. The heading (an h1>-h6> element) of the section it surrounds is frequently contained in a header> element. However, it's not necessary.

One of the HTML5 components is the <header> tag. Multiple <header> tags may be used in an HTML page and positioned anywhere in the content.

The <header> tag cannot be used between another <header> tag and the <address> and <footer> components.

Syntax:

Header tags are used in pairs. Between the opening (header) and closing (/header) tags is where the content is located.

<head>
?..
</head>

HTML Document Structure

We have learned that a typical HTML document will have the following structure.

<html>
   <head>
       Page-related header tags
   </head>
   <body>
       Page-related body tags
    </body>
   </html>

We will go into great detail about the header portion of this article, which is represented by the HTML head> tag. The "head" tag is a container for several significant tags, including <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript>.

Header Elements for HTML

The head section of an HTML page, which provides information about the document, is defined by the <head> element. The <head> tag contains the header components, such as <title>, <meta>, <link>, <style>, and so on.

An HTML document's head is a section of the document whose content is not seen by the user when the page loads in the browser. Only HTML document metadata information about the HTML document is included.

1. <title> Element in HTML

A title for a web page is added using the title element in HTML. Search engines rank and index websites using the page title. In the example below, we've given a Hello World web page.

<!DOCTYPE html>
   <html>
   <head>
   <title>Hello World</title>
   </head>
   <body>
   </body>
   </html>

The output that appears in the browser when you run the HTML code above is as follows.

Output:

The title of the document is specified via the HTML <title> element. The page's tab or the browser's title bar displays the title, which must only be text. HTML pages must have the <title> element.

Creates a title for the toolbar of the browser
It gives the page's title when it is added to your favorites.
It will show the page's title in search engine results.

Therefore, ensure the title is as precise and relevant as possible.

2. <style> Element in HTML

Internal styling for a web page is added using the HTML style element. In an HTML page, style components are always contained within the head tag. Internal styling is a fantastic choice if we only want to style a few items.

Example:

<!DOCTYPE html>
   <html>

   <head>
      <title>An example of a style tag</title>
      <style>
         .example{
            background-color: pink;
            padding: 30px;
         }
      </style>
   </head>
   <body>
      <p class = "example">Hello, World!</p>
   </body>
   </html>

The output that appears in the browser when you run the HTML code above is as follows.

Output:

3. <link> Element in HTML

Use the link element in an HTML page to link external files, stylesheets, icons, etc. The syntax is listed below.

The rel attribute in HTML is used to specify the connection between a linked document and an HTML document.

Example:

<!DOCTYPE html>
   <html>

   <head>
      <title>HTML link tag example</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <p>Welcome to the page</p>
   </body>
   </html>

The above program will lead to the outcome shown below.

Output:

4. <meta> Element in HTML

The HTML <meta> tag holds information or metadata utilized by browsers and search engines but isn't visible on the page. The <meta> element is often used to describe the character set, page description, keywords, document author, and viewport settings. Please look at the example below for a better understanding.

<!DOCTYPE html>
   <html>

   <head>
      <title>An example of an HTML meta tag</title>

      <meta name = "keywords" content = "C, C++, Java, PHP, Python">

      <meta name = "description" content = "We can learn the above languages">

      <meta name = "author" content = "ABC">

      <meta http-equiv = "expires" content = "Tue, May 6th, 2008, 5:32:54 IST">

   </head>

   <body>
      <p>Welcome to the page</p>
   </body>
   </html>

Output:

5. <base> Element in HTML

A base URL is supplied for relative links using the HTML base> element. All relative links inside the document will utilize that URL as their beginning point if the base URL is set inside the page head element.

Every relative URL on the page will begin with www.abc.com/, for instance, if the URL defined by the base tag is www.abc.com. There may only be one base element in an HTML page, which must have the href and target attributes.

Example:

<!DOCTYPE html>
   <html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://en.wikipedia.org/wiki/Sachin_Tendulkar" />
   </head>

   <body>
      <img src = "C:\Users\Maram Ujwala\Pictures\Saved Pictures\Images/sachin.jpeg"                       h   height="200px" width="180px" alt = "sachin"/>
      <a href = "./">Sachin Tendulkar</a> 
      <p>click the link above </p>
   </body>

   </html>

Output:

6. <script> Element in HTML

Both internal and external scripts may be added using the HTML script element. In an HTML page, the script tag is always positioned within the body tag. The src attribute found inside a script opening element may be used to include external scripts.

Internal Script:

<script>
   Code
   </script>

External Script:

Example:

<!DOCTYPE html>
   <html>
   <head>
      <title>An example for HTML script tag</title>
      <script type = "text/JavaScript">
         function example() {
            alert("Hello");
         }
      </script>
   </head>
   <body>
      <input type = "button" onclick = "example();" name = "yes" value = "click" />
   </body>
   </html>

Output: