CODEWITHSUNDEEP
html
ValarMorghulis
ValarMorghulis

Reputation: 79

Can <header> replace <head> in HTML?

I just started reading about headers and I found an article here on SO dating to 2011 which says that the <header> tag is another way of writing <div class="header">.

However, just for fun, I experimented with it and replaced <head> with <header> and found no change in my site at all. Even the <title> displays correctly.

Hence my question. Is the <header> tag in html5 a replacement for the <head> tag? If not, could anyone offer a suggestion on why things haven't changed on my site?

Thanks in advance.

Upvotes: 1

Views: 2652

Answers (4)

user3218194
user3218194

Reputation: 458

      <header> is one of several new tags in HTML5 that are supposed to replace <div> 
  for some specific situations. In particular, the "header" part of your page - whatever that is,
usually the part that would be wrapped in <div class="header"> - in HTML5 you should use <header> instead.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201836

It is an oversimplification to say that “<header> tag is another way of writing <div class="header">”, but it is true that it is meant to be used where authors have often used a div with a class attribute.

The header element is by no means a replacement for head. The two have little in common beyond the similarity of names.

The observation that replacing head tags by header tags does not seem to have any effect has a natural explanation: neither of these tags has much effect anyway. The only real effect is that header is a block level element, but in most cases this does not matter, especially if all its child elements are block level elements, as they typically are. Similarly, you would see no effect if you replaced head tags by foobar tags (I mean literally <foobar> and </foobar>).

Nominally, <head> indicates the head part of a document, which may contain a few different tags only. In practice, apart from some abnormal cases, the <head> and </head> tags have no effect (and they are optional, by the specifications, except in XHTML). Elements like title and meta are recognized without them. The entire division of a document to head and body parts is just formal and conceptual.

The header tags as such have no effect, beyond the block thing and beyond creating an element node, which you can style in CSS or process with JavaScript.

Upvotes: 0

T J
T J

Reputation: 43166

Generally the browsers are way too tolerant to invalid html. For example, regardless of whether you have duplicate id's or you have a <tr> inside a <ul>, It will still render your html, But it's better to not take advantage of it, because this can cause unexpected results in later point of time, for example when you're writing css or scripts.

The <header> element is one of the semantic tags introduced as part of html5.

From MDN -

<header>

The HTML <header> Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

<head>

The HTML Head Element (<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets

Information about your website such as title should semantically go in the <head> tag.

So adding the information about your site in a <header> tag is "Semantically" incorrect. If you don't want your html code to be semantically correct, then there's no purpose for you using semantic tags at all (my opinion)

Upvotes: 3

faby
faby

Reputation: 7566

absolutely not.

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

You can have only one head element in your document. Refer here for documentation

The <header> tag specifies a header for a document or section.

The <header> element should be used as a container for introductory content or set of navigational links.

You can have several elements in one document.

Header is new in html5 .refer here for documentation about header

head is structural for html page

<html>
<head>
  <script src="urlToScript"></script>
  <link type="text/css" href="urltoCss" />
  <title>title of the html page displayed in the tab (not in the page)</title> 
</head>
<body>
   <header>
    Title displayed in the page
    </header>
</body>
</html>

Upvotes: 1

Related Questions