<head>, <header> and <h1> all are same ???

These all are not same at all.

1). tag is the header of any website's page which contains information about that page. This element is the container for metadata(data about data). includes four essential tags like ,<meta>,<link> and <script>. head tag is not display on web page. <title> is used to show title of the web page. This tag should be starts after html start tag and ends before body start tag.</div><div> </div><div>2). <header> tag contains information related to the title and heading related content which is display on web page. This is the new tag in HTML5. Generally, This tag includes Web page's menu and logo within it. There can be one or more <header> tag in one web page. But this tag cannot contain <footer>, <address> or another <header> tag within it. This tag should be placed within body tag.</div><div> </div><div>3). <h1> tag is a heading tag. Heading is used to show the document structure. Search engines use the headings to index the structure and content of web pages. headings have fixed font size. There are total six headings stars from <h1> which is largest and ends with <h6> which is smallest. you can use h1 or any heading element in header as well as in body section as many time you want. </div><div> </div><div>Consider below example to understand difference between these all tags.</div><br /><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span><span><!DOCTYPE html</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">html</span><span> </span><span class="attribute">lang</span><span>=</span><span class="attribute-value">"en"</span><span> </span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">"http://www.w3.org/1999/xhtml"</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"utf-8"</span><span> </span><span class="tag">/></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>Welcome Page</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">header</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">h1</span><span class="tag">></span><span>This is h1 tag which described header information. </span><span class="tag"></</span><span class="tag-name">h1</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"></</span><span class="tag-name">header</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> </span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">hr</span><span> </span><span class="tag">/></span><span> </span><span class="comments"></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">h1</span><span class="tag">></span><span>Hello This is a another h1 tag for described body information. </span><span class="tag"></</span><span class="tag-name">h1</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">h3</span><span class="tag">></span><span>This is a h3 tag. </span><span class="tag"></</span><span class="tag-name">h3</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">h6</span><span class="tag">></span><span>This is a h6 tag. </span><span class="tag"></</span><span class="tag-name">h6</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> <br /></span></span></li></ol></div><div>Output:</div><div> </div><div><img loading="lazy" src="https://cdn.c-sharpcorner.com/forums/uploadfile/f856cd/10202019233355pm/demohtml1.webp" alt="" /> </div><div> </div><div>As you can see in above example header, head and h1 are totally different from each other. Here i used <hr/> tag which is used to create horizontal line in web page to distinguish diffrent sectoins in a web page.</div><div> </div><div>Hope This will Help you.</div>Thank you.</div><div class="comment-foot"><span class="reply-vote"><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-up" title="Sign in to vote up" aria-label="Vote up"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 2.5 14.5 12h-13z"></path></svg></a><span class="reply-vote-score" title="0 up, 0 down">0</span><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-down" title="Sign in to vote down" aria-label="Vote down"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 13.5 1.5 4h13z"></path></svg></a></span></div></div></article></li><li class="comment-thread"><article class="comment"><a class="comment-photo-link" href="/members/rajanikant-havaladar" title="Rajanikant Hawaldar"><img class="comment-photo" src="https://cdn.c-sharpcorner.com/uploadfile/authorimage/2d059d20221013105547.webp" alt="Rajanikant Hawaldar" title="Rajanikant Hawaldar" loading="lazy" data-avatar-name="Rajanikant Hawaldar" referrerPolicy="no-referrer"/></a><div class="comment-main"><div class="comment-head"><p class="comment-byline"><a href="/members/rajanikant-havaladar" class="comment-author">Rajanikant Hawaldar</a><span class="posted-when" tabindex="0"><time class="posted-when-value comment-time" dateTime="2019-10-20T07:27:03.890Z">7y ago</time><span class="posted-when-pop" role="tooltip"><span>Posted Oct 20, 2019, 7:27 AM</span></span></span></p></div><div class="article-body forum-plain-text">Good question please go through below link https://teamtreehouse.com/community/what-is-the-difference-between-header-and-h1</div><div class="comment-foot"><span class="reply-vote"><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-up" title="Sign in to vote up" aria-label="Vote up"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 2.5 14.5 12h-13z"></path></svg></a><span class="reply-vote-score" title="0 up, 0 down">0</span><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-down" title="Sign in to vote down" aria-label="Vote down"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 13.5 1.5 4h13z"></path></svg></a></span></div></div></article></li></ul></section></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bidyasagar Mishra7y ago
: It is the super tag of the title,meta, link and script tag of the page. It dont have any atribute.
: Is used for contain the common header information of the page.

: It is used for letter sizing in the html page.
0
Harsh Shah7y ago
Hi

These all are not same at all.

1). tag is the header of any website's page which contains information about that page. This element is the container for metadata(data about data). includes four essential tags like ,<meta>,<link> and <script>. head tag is not display on web page. <title> is used to show title of the web page. This tag should be starts after html start tag and ends before body start tag.</div><div> </div><div>2). <header> tag contains information related to the title and heading related content which is display on web page. This is the new tag in HTML5. Generally, This tag includes Web page's menu and logo within it. There can be one or more <header> tag in one web page. But this tag cannot contain <footer>, <address> or another <header> tag within it. This tag should be placed within body tag.</div><div> </div><div>3). <h1> tag is a heading tag. Heading is used to show the document structure. Search engines use the headings to index the structure and content of web pages. headings have fixed font size. There are total six headings stars from <h1> which is largest and ends with <h6> which is smallest. you can use h1 or any heading element in header as well as in body section as many time you want. </div><div> </div><div>Consider below example to understand difference between these all tags.</div><br /><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span><span><!DOCTYPE html</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"><</span><span class="tag-name">html</span><span> </span><span class="attribute">lang</span><span>=</span><span class="attribute-value">"en"</span><span> </span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">"http://www.w3.org/1999/xhtml"</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"utf-8"</span><span> </span><span class="tag">/></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>Welcome Page</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">header</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">h1</span><span class="tag">></span><span>This is h1 tag which described header information. </span><span class="tag"></</span><span class="tag-name">h1</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"></</span><span class="tag-name">header</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> </span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">hr</span><span> </span><span class="tag">/></span><span> </span><span class="comments"></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">h1</span><span class="tag">></span><span>Hello This is a another h1 tag for described body information. </span><span class="tag"></</span><span class="tag-name">h1</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">h3</span><span class="tag">></span><span>This is a h3 tag. </span><span class="tag"></</span><span class="tag-name">h3</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">h6</span><span class="tag">></span><span>This is a h6 tag. </span><span class="tag"></</span><span class="tag-name">h6</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> <br /></span></span></li></ol></div><div>Output:</div><div> </div><div><img loading="lazy" src="https://cdn.c-sharpcorner.com/forums/uploadfile/f856cd/10202019233355pm/demohtml1.webp" alt="" /> </div><div> </div><div>As you can see in above example header, head and h1 are totally different from each other. Here i used <hr/> tag which is used to create horizontal line in web page to distinguish diffrent sectoins in a web page.</div><div> </div><div>Hope This will Help you.</div>Thank you.</div><div class="comment-foot"><span class="reply-vote"><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-up" title="Sign in to vote up" aria-label="Vote up"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 2.5 14.5 12h-13z"></path></svg></a><span class="reply-vote-score" title="0 up, 0 down">0</span><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-down" title="Sign in to vote down" aria-label="Vote down"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 13.5 1.5 4h13z"></path></svg></a></span></div></div></article></li><li class="comment-thread"><article class="comment"><a class="comment-photo-link" href="/members/rajanikant-havaladar" title="Rajanikant Hawaldar"><img class="comment-photo" src="https://cdn.c-sharpcorner.com/uploadfile/authorimage/2d059d20221013105547.webp" alt="Rajanikant Hawaldar" title="Rajanikant Hawaldar" loading="lazy" data-avatar-name="Rajanikant Hawaldar" referrerPolicy="no-referrer"/></a><div class="comment-main"><div class="comment-head"><p class="comment-byline"><a href="/members/rajanikant-havaladar" class="comment-author">Rajanikant Hawaldar</a><span class="posted-when" tabindex="0"><time class="posted-when-value comment-time" dateTime="2019-10-20T07:27:03.890Z">7y ago</time><span class="posted-when-pop" role="tooltip"><span>Posted Oct 20, 2019, 7:27 AM</span></span></span></p></div><div class="article-body forum-plain-text">Good question please go through below link https://teamtreehouse.com/community/what-is-the-difference-between-header-and-h1</div><div class="comment-foot"><span class="reply-vote"><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-up" title="Sign in to vote up" aria-label="Vote up"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 2.5 14.5 12h-13z"></path></svg></a><span class="reply-vote-score" title="0 up, 0 down">0</span><a href="/login?returnurl=%2Fforums%2Fltheadgt-ltheadergt-and-lth1gt-all-are-same" class="reply-vote-btn reply-vote-down" title="Sign in to vote down" aria-label="Vote down"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 13.5 1.5 4h13z"></path></svg></a></span></div></div></article></li></ul></section></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>