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

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.

Related

HTML Document Outlines: why is `<title>` not honoured?

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.

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.

In HTML5, can the <header> and <footer> tags appear outside of the <body> tag?

I'm currently using the above tags in this way (classic tag order):
<html>
<head>...</head>
<body>
<header>...</header>
<section>...</section>
<footer>...</footer>
</body>
</html>
Tag usage and specifications were very rigid in previous versions of HTML (4.x), while HTML5 doesn't really need <head> and even <body> tags.
So I would use the following structure, which IMHO is much more semantic than the previous one.
<html>
<header>...</header> <!-- put header and footer outside the body tag -->
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
What do you think?
Well, the <head> tag has nothing to do with the <header> tag. In the head comes all the metadata and stuff, while the header is just a layout component.
And layout comes into body. So I disagree with you.
Let's get a canonical answer here. I will reference the HTML5 spec.
First of all, 12.1.2.4 Optional tags:
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
Then, the 4.1.1 The html element:
Content model: A head element followed by a body element.
Having the cited restrictions and strictly defined element order, we can easily work out what are the rules for placing implicit <body> tag.
Since <head/> must come first, and it can contain elements only (and not direct text), all elements suitable for <head/> will become the part of implicit <head/>, up to the first stray text or <body/>-specific element. At that moment, all remaining elements and text nodes will be placed in <body/>.
Now let's consider your second snippet:
<html>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
Here, the <header/> element is not suitable for <head/> (it's flow content), the <body> tag will be placed immediately before it. In other words, the document will be understood by browser as following:
<html>
<head/>
<body>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</body>
</html>
And that's certainly not what you were expecting. And as a note, it is invalid as well; see 4.4.1 The body element:
Contexts in which this element can be used: As the second element in an html element.
[...]
In conforming documents, there is only one body element.
Thus, the <header/> or <footer/> will be correctly used in this context. Well, they will be practically equivalent to the first snippet. But this will cause an additional <body/> element in middle of a <body/> which is invalid.
As a side note, you're probably confusing <body/> here with the main part of the content which has no specific element. You could look up that page for other solutions on getting what you want.
Quoting 4.4.1 The body element once again:
The body element represents the main content of the document.
which means all the content. And both header and footer are part of this content.
I see what you are trying to do, you are trying to use the <body> tag as the container for the main content of the page. Instead, use the <main> tag, as specified in the HTML5 spec. I use this layout:
<!DOCTYPE html>
<html>
<head> *Metadata* </head>
<body>
<header>
*<h1> and other important stuff </h1>*
<nav> *Usually a formatted <Ul>* </nav>
</header>
<main> *All my content* </main>
<footer> *Copyright, links, social media etc* </footer>
</body>
</html>
I'm not 100% sure but I think that anything outside the <body> tag is considered metadata and will not be rendered by the browser. I don't think that the DOM can access it either.
To conclude, use the <main> tag for your content and keep formatting your HTML the correct way as you have in your first code snippet. You used the <section> tag but I think that comes with some weird formatting issues when you try to apply CSS.
If you really want it to look more semantic like having the <body> in the middle you can use the <main> element. With all the recent advances the <body>element is not as semantic as it once was but you just have to think of it as a wrapper in which the view port sees.
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section></section>
<article></article>
</main>
<footer>
</footer>
<body>
</html>
According to the HTML standard, the content model of the HTML element is:
A head element followed by a body
element.
You can either define the BODY element in the source code:
<html>
<body>
... web-page ...
</body>
</html>
or you can omit the BODY element:
<html>
... web-page ...
</html>
However, it is invalid to place the BODY element inside the web-page content (in-between other elements or text content), like so:
<html>
... content ...
<body>
... content ...
</body>
... content ...
</html>
I agree with some of the others' answers. The <head> and <header> tags have two unique and very unrelated functions. The <header> tag, if I'm not mistaken, was introduced in HTML5 and was created for increased accessibility, namely for screen readers. It's generally used to indicate the heading of your document and, in order to work appropriately and effectively, should be placed inside the <body> tag. The <head> tag, since it's origin, is used for SEO in that it constructs all of the necessary meta data and such. A valid HTML structure for your page with both tags included would be like something like this:
<!DOCTYPE html/>
<html lang="es">
<head>
<!--crazy meta stuff here-->
</head>
<body>
<header>
<!--Optional nav tag-->
<nav>
</nav>
</header>
<!--Body content-->
</body>
</html>
This is the general structure of an html document.
<html>
<head>
Title, meta-data, scripts, etc go here... Don't confuse with header
</head>
<body>
You body stuff comes here...
<footer>
Your footer stuff goes here...
</footer>
</body>
</html>
Even though the <head> and <body> tags aren't required, the elements are still there - it's just that the browser can work out where the tags would have been from the rest of the document.
The other elements you're using still have to be inside the <body>

<header> vs. <head>

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.