This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
<header> vs. <head>
Do I have to use <div class="header"> as <header> in HTML5? Somebody explained one question like that <header> vs. <head>. I am a bit confused.
Thanks for any help. I appreciate it.
As the linked question explains:
<head>
<title>Your page | Your company</title>
<meta name="keywords" value="blah blah"/>
<link rel="stylesheet" href="css/style.css">
<script></script>
</head>
is still the same in HTML5, for storing meta information and linked scripts etc.
Header is a new element for grouping the header of a page or section symantically.
Including James Simm's info:
Technically, the element in HTML5 represents a group of
introductory, or navigation aids. It isn't just for a given page or
document. can be used within sectioning elements such as
or too. See WHATWG for more info
<header>
<h1>Your page heading</h1>
<nav>
<ul><li>Global Nav Item 1</li></ul>
</nav>
</header>
You do not need to use any of the new tags in HTML5. You can use them if you want though.
<header> is a semantic tag to mark the header section of your site while <head> is the are where things like meta tags go.
<head></head>
is where your meta information, scripts, stylesheets etc.. goes.
And header is a bit like <div class="header">.
The <head> tag is used outside the body element
Here you load your scripts and style sheets, put your meta data and your page title.
The HTML5 <header> tag is used to display a header on your page. Containing your logo or your menu. Depending on the site.
These are 2 different tags with 2 different meanings
<header>, <article>, <section>, <aside>, <mark>, <footer> etc are tags added in HTML5 to make your code more meaning full then <div>.
<div> is basically for division it's not make clear what content you do have inside your DIV.
<header> as it's name anyone can understand that it's contain content related to heading
same for article, section, aside, mark they all are tags contain content have to display to user.
<head> tag do not contain any information have to display on screen to user. It's for your meta tags, to add style sheets, title, keywords etc.
For more information in detail you can check http://html5doctor.com/ It's a excellent website to understand HTML5 in detail
Related
I am planning to insert an advertisement in the middle of the page content while not breaking accessibility and semantics. My page has its contents inside a <main> element, but I am confused if I should use an <aside> or <div role="complementary"> to nest the advertisement.
What confuses me more is that W3C's documentation says:
complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
and in Example 1 below the page, it shows:
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
My understanding is that not all advertisements (like Google Ads) would support or relate to the main content. What is the appropriate markup to use?
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Test page</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<main>
<!-- main content -->
<aside>
<!-- advertisement -->
</aside>
<!-- main content continues -->
</main>
</body>
</html>
The aside element should be used. Its definition explicitly mentions advertisements:
The element can be used […] for advertising […] and for other content that is considered separate from the main content of the nearest ancestor sectioning content.
The aside element has the complementary role by default (so it should not be added explicitly).
Unless the ad is integrated with the content, it would be better to have it outside of the main element. But if that’s not possible, like in your case, using aside in main seems to be the best option available.
WAI-ARIA says for the complementary role:
If the complementary content is completely separable from the main content, it may be appropriate to use a more general role.
But the other roles allowed for the aside element (feed, note, search or presentation) don’t seem to be suitable.
So I started writing HTML code for a school assignment. I wanted to use HTML5 semantics such as <section>, <article> and so on. But I encountered something peculiar about heading sizes when placed in these tags (see below). I then proceeded to change the semantics back to only HTML that being only <div> and the headings worked fine. I'll post some screen shots to help clarify the situation.
First the Code with <div> tags only
<!DOCTYPE html>
<html>
<head>
<title>
Curriculum Vitae
</title>
</head>
<body>
<div>
<h1>Curriculum Vitae</h1>
</div>
<div>
<h2>Personal Information</h2>
<ul>
<ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
</ul>
</div>
</body>
</html>
The heading sizes appear to work properly within in the div tags
Next is the code using HTML5 semantics
<!DOCTYPE html>
<html>
<header>
<title>
Curriculum Vitae
</title>
</header>
<body>
<article>
<section>
<h1>Curriculum Vitae</h1>
</section>
<section>
<h2>Personal Information</h2>
<ul>
<ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
</ul>
</section>
</article>
</body>
</html>
Note here in this picture I have used the same heading tags for Curriculum Vitae and Personal Information but the heading sizes seemed to have switched?!
Could someone else please verify whether this appears to be a problem only with me or am I using HTML5 semantic tags in a completely wrong manner which is causing the peculiar behavior of the headings?
P.S. Any links for HTML documentation or tutorials would be awesome (currently I'm learning the course online on udacity & w33schools and in school as a subject)
You're mixing up head and header tags. They are very different.
Every HTML page must have a head tag (although browsers usually insert one if it's missing).
The header tag is used as a heading for the content of the page, as a title or something similar. It's optional and will be inside the body tag; potentially before a article, or some other "main content tag".
Why is the element <title> not considered in the document outline? Surely this should be the root title? I’ve gotten into the habit of having a <h1> at the start of my page to include the page title in the document hierarchy, but surely this shouldn’t be necessary given we have <title>?
<title> defines the title of the page as displayed in the browser window itself, not in the content of the page. It should be between the <head> tags.
The <title> tag belongs in the <header> and describes the entire page. The <h1> tag describes a content block. You can have multiple <h1> tags on the page, but only one <title> tag should be present.
More on this can be found in the W3 HTML Specification: http://www.w3.org/TR/html401/
To further add: the document outline describes rendered content, that is everything that goes in to the <body> tag. It is not required to use these additional tags, the title tag can be sufficient. However if the HTML page contains multiple articles/sections/documents then without these tags it will be hard for say a search engine to make sense out of the content.
I was watching tutorials about html for beginners and tried to make a simple html file.
when I open this on google chrome the body "hello" is showing up but the title part "first page" doesn't. Did I type something wrong? thanks in advance for your response.
//I apologies for those of you who already answered this. I now see that I have made a mistake on explaining my problem. I meant to show it as a header not title. I already got the answer from the given answers//
<html>
<head>
<title> first page </title>
</head>
<body>
hello
</body>
</html>
Where do you expect title to be shown?
Title is what usually is displayed in the tab bar of your browser, or as text in your window switcher in your operating system. It does not show up inside your webpage.
Your markup seems to be correct, just look for the title in the browser window.
If you meant to make a title (in the meaning of a large text displaying in your website) one way of doing this is to, below your body-tag, write
<h1>Title here</h1>.
<title> is not showing in web page; it is shown in Tab / Window's title.
Suggested to learn the basic HTML structure first.
i think you want a header
<html>
<head>
<title>my page </title>
</head>
<body>
<h1> first page </h1>
hello
</body>
</html>
I learned that the title is the meta tag (the SEO bits), and the H1 is what shows up on the page. So if you'd like both to be the same, example: Things I've Learned is the title and the header of your website, you'd repeat the line.
<html>
<head>
<title>Things I've Learned</title>
</head>
<body>
<h1>Things I've Learned</h1>
<p>These are the things</p>
</body>
</html>
VIA QUORA:
"The key difference between these tags is where their content appears. That difference impacts how search engines and web surfers analyze your page. Title Tag: The Title Tag is known as a meta tag. ... Because it displays the largest text, the H1 Header tag is often used to create a title at the top of the page."
More on how to optimize titles for search engines here.
In this tutorial: http://railstutorial.org/chapters/filling-in-the-layout#top
There is "header"
I know that in HTML there is "head"
But, what is <header> ?
Thanks.
<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.
Chapter 3 of Dive into HTML5 by Mark Pilgrim does an excellent job going into the details of when and why to use the new <header> element.
<header> is a semantic tag added in HTML5. It's the HTML5 equivalent of using <div class="header"> for a header element in your page.
<head> Defines the information about the article such as including meta data,title,links & scripts. It doesn't have a visual appearance.
<header> defines a header for a document or a section. It is added in HTML5. It has a visual appearance, it will be useful to show in the header a logo, menu, and other heading details. It needs to be defined inside the body.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ganesamoorthi M</title>
<meta name="author" content="Ganesamoorthi M">
<meta name="description" content="Head vs Header">
<meta name="keywords" content="HTML,CSS,Head,Header">
</head>
<body>
<header>
<h1>Ganesamoorthi M - Software Developer</h1>
</header>
<section>
<p>Head vs Header</p>
</section>
<footer>
<p>© 2018 Ganesamoorthi M</p>
</footer>
</body>
</html>
<header> is from HTML5 and it meant to be contain the top/navigational part of your webpage in <body>. Like top logo, menu, slogan and other heading stuff.
The "header" element does not exist in the current html specification so it is ignored (but may be styled using css of course). It is part of the current draft for the upcoming HTML version 5.
It is not related to the "head" element which contains information page the page but no structure.