What is <header> Tag?
The <header> tag specifies a header for a webpage or a specific section. It commonly contains elements such as a logo, a search input field, navigation links, and more.
This element does not create a fresh section in the document outline. The title (an h1>-h6> element) within the section is commonly enclosed in a header> element, although this is not mandatory.
One of the components in HTML5 is the <header> element. Numerous <header> elements can be integrated within an HTML document and situated at various locations within the content.
The <header> tag cannot be used between another <header> tag and the <address> and <footer> components.
Syntax:
Header tags are typically utilized in pairs. The content is positioned between the opening <header> and closing </header> tags.
<head>
?..
</head>
HTML Document Structure
We have been informed that a standard HTML document typically follows this 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.
The head section of an HTML document is a segment that remains hidden from users upon loading the page in a web browser. It exclusively contains metadata pertaining to the HTML document.
1. <title> Element in HTML
A webpage's title is inserted using the title element within HTML. Search engines evaluate and categorize websites based on the page title. In the following instance, we have provided a sample Hello World webpage.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>
The result displayed in the browser upon executing the HTML code provided 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, it is important to make sure the title is accurate and directly related to the content.
2. <style> Element in HTML
Styling within a web page is incorporated through the HTML style element. Within an HTML document, style directives are consistently enclosed within the head tag. Opting for internal styling proves to be an excellent option when the intention is to apply styles to specific elements only.
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 result displayed in the web browser upon executing the HTML code mentioned above is as follows.
Output:
3. <link> Element in HTML
Utilize the link element within an HTML document to establish connections to external resources such as files, stylesheets, icons, and more. The format for implementing this feature is provided as follows.
<link rel="stylesheet" href="style.css">
The rel attribute in HTML is employed to indicate the relationship between an HTML document and a linked 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 preceding program will result in the output displayed underneath.
Output:
4. <meta> Element in HTML
The HTML <meta> tag contains data or metadata that is important for browsers and search engines but remains hidden from the user's view. The <meta> element is commonly employed to specify the character encoding, page description, keywords, authorship details, and viewport configurations. Refer to the example provided below to enhance your comprehension.
<!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 foundational URL is provided for relative links by employing the HTML <base> element. When the base URL is specified within the page head element, all relative links within the document will start from that URL.
Every internal URL within the webpage will start with www.abc.com/. For example, if the base tag specifies the URL as www.abc.com. An HTML page can contain only a single base element, which is required to have both 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 = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" 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 can be inserted using the HTML script element. Within an HTML document, the script tag is consistently located inside the body tag. The src attribute within the opening script tag enables the incorporation of external scripts.
Internal Script:
<script>
Code
</script>
External Script:
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></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:
When the button is clicked, the outcome displayed is as follows.