Cover Image for HTML header Tag
50 views

HTML header Tag

The <header> tag is an HTML element that is used to define the header section of a web page or a section within a document. It typically contains introductory content, branding elements, navigation menus, and other elements related to the top or introductory portion of a document.

Here’s an example of how the <header> tag is used:

HTML<span role="button" tabindex="0" data-code="<!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <header> <h1>My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <!– Content of the web page goes here –> </body>
<!DOCTYPE html>
<html>
     <head>
          <title>My Web Page</title>
     </head>
     <body>
          <header>
              <h1>My Website</h1>
              <nav>
                   <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                   </ul>
              </nav>
          </header>
          <!-- Content of the web page goes here -->
     </body>
</html>

In this example, the <header> section contains a heading (<h1>) representing the website’s name or main title. It also includes a navigation menu (<nav>) with a list of links (<ul> and <li>) for navigating different sections of the website.

The <header> tag is typically placed at the top of the document, within the <body> section, to provide a consistent header across multiple pages of a website. It can be used to define the overall header for the entire document or specific sections within the document.

It’s important to note that the <header> tag is a semantic HTML element that provides meaning and structure to the content. It is used to identify the header portion of the document for search engines, assistive technologies, and other web tools. Styling and layout of the header section can be achieved using CSS.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS