<header> vs. <head> - html

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.

Related

Semantic way of adding an advertisement inside the <main> element?

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.

HTML5 Headings not acting as they should

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".

Html Hierarchy: Whats acceptable when extending the <head>?

When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.

header in HTML5 [duplicate]

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

what is the difference between tag div and tag section for pages in jquery mobile

I saw both div and section been used in data-role="page". For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>This content will be ignored.</p>
<!-- Begin Page 4 -->
<section id="page4" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>External Page!</p>
<p>Go to First Page.</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- End Page 4-->
<h3>This content will be ignored as well.</h3>
</body>
</html>
and
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Facebook Friends</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
What's the difference and what is section used for?Will it prevents load contents in it when it is not shown?
SECTION is simply an HTML5 tag. Since HTML5 is relatively new, many developers improperly use it, or you'll see only portions of a project updated to use the new tags while the rest continue to use DIV tags. The code that you have provided that uses SECTION does appear to use it in the proper place and context, just to give you an idea.
Check out this brief article on the SECTION tag and when to use it, don't get the idea that SECTION is just a fancy name for DIV: http://www.impressivewebs.com/html5-section/
Also, it never hurts to check out the specs: http://w3c.github.io/html/sections.html#the-section-element
The short answer to your question, though, is that there is no practical difference - a SECTION tag will behave exactly the same as a DIV tag in terms of how CSS affects it and how you work with it from javascript. The real difference is in how the tags are interpreted when a document outline is created, for example, by a feed reader.
The data-* attributes are a new HTML5 addition (article) that allow you to associate arbitrary data with an HTML element. The data within the attributes can be harnessed by javascript to implement features like tooltips or geolocation data. Formerly, such data had involved hidden child elements or JSON data, or a new AJAX request to fetch such data from the server. Now, javascript can simply read these data attributes to get associated data about a given element. I am not certain how exactly your particular script makes use of the data-role attribute, but it doesn't matter if the attribute is on a DIV, a SECTION, an IMG, or a SPAN insofar as the specification goes.