I've done a few searches for my answer to my question, but I can't seem to get a straight answer other than the cut-and-pasted responses which DO NOT answer my question.
My question is, "Can I use the <main> tag in different pages of my website?"
The websites I've researched state:
"The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document.It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.Note: There must not be more than one <main> element in a document. The element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element."
So...
I understand the <main> tag specifies the main content of a document.
I understand that the content inside the <main> element should be unique to the document.
I also understand it should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
And here is where my question arises...what does it mean by "document?"
Does the word "document" mean:
A) I could use it in my index.html, about_us.html and contact.html, but only once in each of those pages.
or does it mean
B) I cannot use <main> within other pages of the website. Which would mean that if I use it on my index.html then I would not be able to use it in my other pages like about.html or contact.html...?
Websites researched:
https://www.w3schools.com/tags/tag_main.asp
http://blog.teamtreehouse.com/use-html5-sectioning-elements
Thank you for clarifying.
Yes you can use <main> tag in different pages of a website.
Answer A.
A document is short for HTML document, it means a valid html file. Not a html fragment.
There are 3 good uses for the <main>. It can help algorithms that scan web pages be more efficient. Quickly identify the main content, and as a consequence not process what is outside the main. It can be styled with a CSS rule. It can help users with screen readers.
Update: Inside work in progress, html specification, it is possible to have multiple <main>, as long as only 1 is visible.
https://w3c.github.io/html/grouping-content.html#elementdef-main
Related
Beginner here.
In HTML, I have tried leaving the main tag outside the body tag as opposed to the proper way with HTML5 to nest the main tag inside the body tag.
It looks the same to me when I opened the HTML file to compare the two.
<body></body>
<main></main>
<body><main></main></body>
I understand that in HTML5 main tag is supposed to be a part of the body tag but are there any others specific reasons why the main tag is supposed to be nested inside body tag?
What are the impacts if I just leave main outside body? How does it affect the functionality of my code?
The first sentence of the MDN page on <main> states
The <main> HTML element represents the dominant content of the <body> of a document.
So <main> is intended to be used as a part of <body>, hence within it.
The first example is completely invalid. The second is correct. Your content must be within the body of the document.
The <main></main> tag can only be used once per page, it represents the central topic or core content of the document body and is considered an HTML 5 block element.
The second is valid
<body>
<main>
</main>
</body>
The <body> tag is meant to contain all of the visible content of your web page. In contrast, the <head> tag contains meta data about your web page, or to help your web page render correctly (stylesheets, meta data, title, etc...).
As far as I know, there isn't really a good answer for why the content goes in the <body> tag, other than that's where is is supposed to go, so that's where search engines, browsers, and other bots expect it to be.
More information on the <body> tag:
https://www.w3schools.com/tags/tag_body.asp
The <main> tag is meant to contain the main content of your web page and should only appear once. Think of it as a <div> tag except it has some additional meaning to help search engines to better understand your web page.
More information on the <main> tag:
https://www.w3schools.com/tags/tag_main.asp
To answer your main question, if your HTML is not structured properly, it will likely still render as you expect it to (browsers are quite forgiving when it comes to visuals). However, search engines and other bots will have a more difficult time understanding your web page properly.
The body tag contains ALL the elements of your HTML code including your header, footer, navigation, etc. The main tag, as introduced in 2021 by Steve Faulkner, is a part of the body tag and cannot be placed elsewhere.
In addition, you cannot have several main tags either. Make note that you cannot place your header nor footer in the main tag. The main tag can only consist of essential elements and information. These elements and information cannot be repeated elsewhere in your code. The main tag helps developers understand where the actual code begins.
The HTML code validator would display an error if
the main tag is not placed correctly in the body
or, multiple main tags are used
or, if the header or footer is part of the main tag
or, if the main tag is a descendant of the header, nav, article, aside, or footer elements
as the main tag is not meant to be used to section content or otherwise. Therefore, all of the above would be semantically incorrect.
< html >
This element wraps everything (other than the doctype) in your web page.
< head >
This element designates the header portion of your document, which includes some information about your web page. The first detail is the title—open your page in a browser, and this title shows up as the caption on the tab.
< body >
This element holds the meat of your web page, including the actual content you want to be displayed to the world.
So your second one is the correct way to use because of the HTML5 Semantic Tags Structure:
<body></body>
<main></main>
Also, I found this article explain more about HTML tag: https://www.semrush.com/blog/semantic-html5-guide/
I am learning HTML 5 and I read that the <nav> tag defines a set of navigation links. I understood the meaning but didn't get any reason that what is the need of these kind of tags like <header> , <footer> and <nav>.
Consider the example here
<nav>
HTML
CSS
JS
</nav>
The output of the above code will be
HTML CSS JS
Consider the another code
<div>
HTML
CSS
JS
</div>
and the output of these code is also
HTML CSS JS
It shows that <nav> tag doesn't add any special meaning to its content then what is the purpose of such kind of tags.
The purpose for these tags is more for a Semantic HTML. It strengthens the meaning of the information in webpages/web apps, and not just about the style or presentation.
These tags can be used for a more understandable flow of the webpage for the reader. Which is why when these tags are used, they have different CSS styles applied so that it creates a flow, and let's the reader/user know what is important, or what is not as important.
To answer the question you put in your title, specifically about the <nav> tag, it can be used by screen readers for disabled users. For example, the <nav> tag can be used to determine whether to accept or reject the rendering of specific content. That coming specifically from w3schools.
The special tags are also for search engines. A googlebot can then see where the navigation menu, footer and header starts and ends.
From W3 schools:
"Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content."
My shop uses this for web accessibility reasons, for screen readers.
http://www.w3schools.com/tags/tag_nav.asp
I read that the <nav> tag defines a set of navigation links.
The official description of the <nav> element from the w3c specification* is as follows:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
I understood the meaning but didn't get any reason that what is the need of these kind of tags like <header>, <footer> and <nav>.
Following the definition, the spec continues with some additional notes, of particular:
Note: User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
[My example] shows that tag doesn't add any special meaning to its content then what is the purpose of such kind of tags.
This is a flawed line of thinking. The browser semantics* referred to are not talking about how you read the meaning of an element. Browser semantics are referring to how the browser is expected to interpret a given element.
If you use a <div> element--which is semantically transparent--the browser will completely ignore it when interpreting the document for assistive navigation. It's as though the <div> weren't there at all and the contents were just loose within the <div> element's parent container.
If you use a <nav> element, the browser will note that the node includes contents that are used for navigating around the site or section. If you were using a screen reader, you'd be able to use keyboard controls to quickly toggle through the list of <nav> sections of the page.
* a word that means meaning which can be difficult to discuss without devolving into meta-discussions about the nature of semantics and what "means" means.
The tag helps arrange the words to be navigated. With the tag, it's easier for the browser to tell that these are to be navigated and it will treat them as such.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm new to web layout so forgive me if my question seems amateurish. I am trying to layout a landing page consisting of text boxes which will contain links to other pages on the site. The rough design is here:
http://silvercoastlife.com/wptest/landing-page-tester/
So far I have been using div to define the elements on the page but now I have come across article and wonder if I should be using this instead, especially as for SEO purposes I would like each box to have individual h1 headlines.
Thank you in advance for any advice you can offer.
Article would generally be wrapped in a <div> in HTML4, and the subsections would only be suggested by <h1>-<h6> elements. In HTML5 the article should be wrapped in <article>, and the subsections of the <article> should be explicitly indicated by wrapping them in <section> elements, perhaps in ordered list items if you’d like section numbering.
<article>
<h1>Title</h1>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
</article>
For more you can use this reference.
HTML5 is made for exactly the thing you want my friend, the new HTML5 elements certainly serve a SEO purpose in that they can define a lot of portions of your website.
Here is a list of HTML5 tags
HTML5 tags can be used in a very flexible way as long as they serve the correct purpose.
For instance the <header> tag.
It could be used as a header for your website but could also be used as a header for an article. It's multi-purpose but still defines what it is.
I'm pretty sure that if you have a <header> tag within an <article> tag a smart search engine will know the difference between the information in the one within the <article> and a website <header> for instance.
Also - there's tags for every basic definition in a website (as seen in the list above)
Some of the more useful ones I'll list here
<header>
<footer>
<aside>
<nav>
<section>
<main>
These are just some examples and they all serve a semantically different purpose like the <main> tag which is supposed to represent the main content of website or as MDN puts it:
The HTML <main> element represents the main content of the <body> of
a document or application. The main content area consists of content
that is directly related to, or expands upon the central topic of a
document or the central functionality of an application. This content
should be unique to the document, excluding any content that is
repeated across a set of documents such as sidebars, navigation links,
copyright information, site logos, and search forms (unless the
document's main function is as a search form).
Each link above in the list goes to the MDN page for the specified HTML element, you can read up on the semantics per element if you want to know exactly how they should be used.
Furthermore the <div> tag is just a convenient tag to use when things start to get vague or you just need a container that only serves positioning purposes etcetera, it's not wrong or bad to use a <div> tag anywhere either - It's just better to use tags that fit the actual content of your site for SEO purposes.
A small side-note would also be that using these new HTML5 tags could cause incompatibility with older browsers but so far everyone's caught up pretty well. so In general that shouldn't be a problem unless you need to support older browsers.
Maybe the relevant element you are looking for is actually the <section> element as you are defining different sections related to the same page instead of separate articles on different topics.
The below is taken from the following article: http://oli.jp/2009/html5-structure1/
<div> — the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning.
<section> — a generic document or application section. A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.
<article> — an independent part of a document or site. This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer.
You should just take into consideration that article will not be recognized in IE8. As to SEO, HTML5 tags are easier to understand by a machine. Not just the word but the intent and if used properly, like in the Suvro's example and reference, it can actually help.
Is having a single section within the main tag acceptable or is redundant?
<main>
<section>
<section>
...
</section>
<section>
...
</section>
</section>
</main>
Or should I just put the two section tags within the main... even though all the content within it is relatable.
Also, is having a <header> within every single section acceptable? It is classified as “a group of introductory or navigational aids”. But seems like if I were to use it as I've described, it'd be just like using <h1>-<h6>.
The <section> element is used to represent a group of related content. There shouldn't be any issue in nesting these tags. You could also make use of other tags like <article>, <aside> etc.. The idea behind using these elements is to give more semantic meaning to your pages, allowing computer browser to understand your content better.
There are no restrictions on how to nest them and what tags to use in them. You can have the whole set of html tags with in them (you can use h1-h6, or other elements).
You might want to have a look at these articles:
How to Use The HTML5 Sectioning Elements
http://html5doctor.com/the-section-element/
Question: is the single section inside main redundant?
It depends on the semantic meaning of your page. Describe your
desired page layout in natural language. If you say "the main area
has a section that contains many sub-sections", then your HTML is
right on the money. If you say "the main area is broken down into a
few sections", then your single section sounds like an evolved form
of the div-itis virus - the one that left a lot trash behind: wrappers,
containers, container-wrappers, content-wrappers, main-content-wrappers,
wrapping-containers, containing-wrappers...
Question: is header within every section acceptable?
Yes. But again, do the above natural language litmus test to
determine if it is suitable.
There's also some confusion between <h1>-<h6> vs <header>. Think of header as an "introductory part" within a section. It may or may not be necessary in your markup. If your introductory part of the section consists of, say, only a <h1>, you should probably omit use of the <header>; but if your introductory part includes a few items, e.g. a heading, a logo, a nav bar, then it's probably a good idea to wrap them in a <header> tag.
A lot of marketing and content-heavy sites showcase the page's primary content using large text and/or images, sometimes with a slider, containing a call to action for signing up for a service, or downloading an app, etc.. I'm not sure what this design element is called, I got the term hero unit from twitter bootstrap:
http://twitter.github.com/bootstrap/components.html#typography
I think most of you know what I'm trying to describe... If it's not clear I can add screenshots or links to this question.
I looked at a few different sites, and some put this hero unit inside a ASIDE element, others use SECTION, ARTICLE and even HEADER. Using twitter bootstrap as an example again:
<header class="jumbotron masthead">
<div class="inner">
<h1>Bootstrap, from Twitter</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info">
Is HEADER the most appropriate tag for this type of content? Or should I use ASIDE, ARTICLE or SECTION?
From HTML5 doctor, where they discuss how to mark up the main content:
An assistive technlogy like a screenreader can find the main content because it is the first thing inside a page that isn't a header, nav or footer.
So I would just wrap your "hero unit" in a section. Each related group of content on a page should be grouped in its own section, with the first section being the start of the main content.
I would however second #net.uk.sweet's suggestion to frequently use a HTML5 outliner. Also, check out the HTML outlining article on the Mozilla Developers Network, it was really helpful for me.
I'd suggest looking at the w3 specification for each of the tags you're considering using and reading the description and usage examples. Of course you only need to look at the debate spawned by a seemingly simple question such as when to use an article tag to realise that this stuff is pretty subjective. However, reading the spec will leave you in a better position to formulate your own opinion:
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element
I do think that your header tag should be contained in a further sectioning element so that it's not hierarchically equal to other page headers within the element that contains it. What that sectioning element should be will depend on the content of your "hero unit" and how that content relates to the rest of the page.
Finally, check your work frequently in an HTML5 document outliner to get a feel for the structure of your new section and the page which contains it.