I am learning HTML 5 - going pretty smoothly.
My question is that I have a home page, header, menu and below this 3 content blocks, evenly spaced. They each contain various copy, with header text. For example,
Column 1
About Us
Lore Ipsum...
Our Advantage
Lore Ipsum...
Column 2
Our Products
Lore Ipsum...
Column 3
Contact Form
Twitter Feed
Contact Us
Lore Ipsum...
What is the best markup for this? Normally I would but each column in a div. Would this be best?
<div id="column1">
<section>
<h2>About Us</h2>
<p>Lore Ipsum...</p>
</section>
<section>
<h2>Our Advantage</h2>
<p>Lore Ipsum...</p>
</section>
</div>
<div id="column2">
<section>
<h2>Our Products</h2>
<p>Lore Ipsum..</p>
</section>
</div>
<div id="column3">
<form...
<div id="twitter">
<script...>
</div>
<section>
<h2>Contact Us</h2>
<p>Lore Ipsum...</p>
</section>
</div>
I'd say your posted code is fine, although personally I'd use <header><h1></h1></header>, instead of <h2></h2>, since the headings in this case are section headers (this is optional though).
More information on section headers can be found at:
http://html5doctor.com/the-header-element/
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
Consider using the <article> element instead of the <section> element, at least for "About Us" and "Our Advantage". These are almost certainly going to be syndicatable units of content so <article> is more appropriate. Possibly for the other sections too, but it really depends on what the lorem ipsum text says.
Otherwise, what you've got is good. <h2>s for your headings are fine if that's what you want to use. Neither <h1> nor <header> are giving you anything extra.
I would have done the same as you. As long as the sections in each div aren't strongly related. In that case I would change the divs to sections that contains sub-sections. Divs are still valid in HTML5 but are more of general block level containers.
What is the purpose of the div? It serves no function from what I can tell. All the section elements can be styled as they are except 'column3', perhaps.
Related
On my web page, I have a long article.
Now an example of how html might look like this (just picture it being a lot longer):
<h1>Page title</h1>
<article>
<h2>Some title></h2>
<p>Content for that title</p>
<h2>Some other title </h2>
<p> some content for that other title </p>
</article>
This pattern continues.
According to WGAC, all headings should be in sequentially descending order, this is an issue here since my article might have more than 5 (h1 - h5) headers. So what can I do as best practice here?
Should each header be included in an <article> or <section> tag or can they be h2 as shown above?
Example
<main>
<h1>Different Front End Technologies</h1>
<p>Introduction...</p>
<section aria-labelledby="h2-html">
<h2 id="h2-html">HTML</h2>
<p>html...</p>
<h3>Sectioning Elements</h3>
<p>fjdfk</p>
<h4>The Header element</h4>
<h4>The Main element</h4>
<h3>Inline Elements</h3>
<p>fdsfa</p>
<h4>The time element</h4>
<h4>The address element</h4>
</section>
<section aria-labelledby="h2-css">
<h2 id="h2-css">CSS</h2>
<p>fdsafdas</p>
<h3>The Cascade</h3>
<h3>CSS Vars</h3>
<h4>The :root selector</h4>
<h4>Using a var in a property</h4>
<h5>Using calc() with a var</h5>
<h6>Example using calc()</h6>
<h6>Gotchyas using var in older browsers</h6>
<h5>var as inline style</h5>
</section>
<section aria-labelledby="h2-JS">
<h2 id="h2-JS">JavaScript</h2>
</section>
</main>
Note how everything under a <h2> is related to that <h2>. Everything under a <h3> is related to that <h3> which is related to the <h2>. This continues down.
When there are subjects not related to each other again you can move back up to the suitable heading level.
"Skipping heading levels" is when you jump from a <h2> to a <h4> - that is the bit that can be confusing for people using a screen reader as they are likely to navigate by headings using shortcuts in their screen reader.
Bonus for screen readers
If you have a really complex document and you are sure you are not over-nesting items, then there are actually 7 heading levels as far as screen readers are concerned.
You can read more about level 7 headings here
Forgive me if I misspelled it and please correct it.
I do not know exactly how to use these two elements (Article | Section)
Now I want to launch a site that has completely standard HTML code,
Now, how do you think an article from my site should be structured? And where can I put the site header better?
I am stuck between these two options.
<!-- 1 -->
<section>
<header>
<h1>title of page</h1>
</header>
<article>
<p>some text</p>
</article>
</section>
<!-- 2 -->
<section>
<article>
<header>
<h1>title of page</h1>
</header>
</article>
<p>some text</p>
</section>
If both are incorrect, what do you suggest?
My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.
Read more about the HTML element article of Mozilla:
The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.
Unlike the article element, the section element:
The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.
Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.
Accordingly, your example can be presented like this:
<header>
<h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
<h2>News from Valinor</h2>
<p>A short introduction to the content of the article.</p>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
...
</article>
<footer>
<h2>Publisher and copyright holder</h2>
<p>Publisher and © 2021 Gandalf</p>
</footer>
Suppose there is a main heading and it has several sub headings which can be categorized by giving them separate headings but instead they are visually communicated differently than giving them separate headings.
i.e:
In such a case how should we use heading tags?
What I believe should be the right thing to do (but not sure) is to add separate section element for both categories.
like this:
Any suggestions?
Note that the section element is a sectioning content element. This means it creates an entry in the document outline. If you want to use h1-h6 according to the corresponding rank in the outline, your h2 headings should become h3 headings.
Also note that it’s recommended to explicitly use sectioning content elements where appropriate (e.g., at least wherever you use heading elements), so you might want to use section for "What we do" etc., too.
So the outline-relevant structure could look like this:
<body>
<h1>Xyz Company</h1>
<section>
<h2>About us</h2>
<section>
<h3>What we do</h3>
</section>
<section>
<h3>Where we are?</h3>
</section>
<section>
<h3>Where we do?</h3>
</section>
</section>
<section>
<h2>Attributes</h2>
<section>
<h3>Respect</h3>
</section>
<section>
<h3>Responsibility</h3>
</section>
<section>
<h3>Growth</h3>
</section>
</section>
</body>
Each sectioning content element (and each sectioning root element, i.e., body in this case) has its own heading, and there is no heading without explicit section.
Even if you don’t want to provide "About us" and "Attributes" headings, you can still keep the two section elements. Not ideal, but better than not having these, because they make the intended document outline clear. (A compromise could be to visually hide these two headings with CSS.)
From a pure technical SEO standpoint, it would be better if both sections had their own heading, and the contents of those sections had their subheadings, so you would be looking for something like this:
<main>
<h1>Your Company Name</h1>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
</section>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
</section>
</main>
Usually what I like to do is look at the page without any CSS/JavaScript and see how it looks. If you have the same flow, and things appear like they should by default, you are on the right track.
Search engines are smart enough to understand what you mean, even if you use div for everything, but having it semantically correct may increase their likeness towards your clean and organized code.
Adding sections for both could be helpful, but what is much more helpful is that this page talks about a specific topic, other than multiple. So I would recommend that instead, you make one page for each About Us and Attributes. If it seems overkill, you can go with just one page; That would be correct, but not optimal in search engines eyes -- They really like that you have one page for each topic and that they-re unique within the domain.
I currently have an ordered list that I want to markup using the new HTML 5 attributes. It looks like this:
<ol class="section">
<li class="article">
<h2>Article A</h2>
<p>Some text</p>
</li>
<li class="article">
<h2>Article B</h2>
<p>Some text</p>
</li>
<li class="article">
<h2>Article C</h2>
<p>Some text</p>
</li>
</ol>
It seems the only way to keep the list AND use HTML 5 tags is to add a whole bunch of unnecessary divs:
<section>
<ol>
<li>
<article>
<h2>Article A</h2>
<p>Some text</p>
</article>
</li>
<li>
<article>
<h2>Article B</h2>
<p>Some text</p>
</article>
</li>
<li>
<article>
<h2>Article C</h2>
<p>Some text</p>
</article>
</li>
</ol>
</section>
Is there a better way to do this? What are your thoughts?
If you’re using a list to add chronological order semantics to weblog posts, and as #Tomas mentioned each article is self-contained, then your code is ok (I’d remove the containing section though — it’s untitled and unnecessary).
However as you say there’s some extra markup. If you want to use less HTML, you can remove the list. You may think that you’ve then lost the chronological order semantics, but you can actually do this better using time with the pubdate attribute. This would look like:
<article>
<header>
<h2>The lolcat singularity</h2>
<time datetime="2010-05-24" pubdate="pubdate">Today</time>
</header>
<p>…</p>
</article>
<article>
<header>
<h2>The internet is made of cats</h2>
<time datetime="2010-05-23" pubdate="pubdate">Yesterday</time>
</header>
<p>…</p>
</article>
If you’re making a list of articles on the homepage, you’ll have to decide if the content stands alone (i.e. would you make a feed out of the article summaries). If so then the above code is still fine. If the summaries are too short to be self-contained, then you could choose to use a list, but at that stage you’re not dealing with “article” semantics, so your original classnames would be a little misleading:
<ol class="article-list">
<li>
<h2>Article A</h2>
<p>Some text</p>
</li>
<li>
<h2>Article B</h2>
<p>Some text</p>
</li>
<li>
<h2>Article C</h2>
<p>Some text</p>
</li>
</ol>
and select using .article-list li {} or .article-list h2 {} etc.
Fwiw I actually ended up using an ordered list containing article with time pubdate — the semantic belt and suspenders approach. I’m now wondering if I should remove the list myself :) You can also get carried away with hAtom, but note that ARIA’s role="article" shouldn’t be used on list items.
While HTML5 is an evolution, you’ll get the most benefit from throwing out your old code, starting from the content and a good guide to the spec, and marking stuff up from scratch. HTH!
According to the last editor's draft:
The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
As I interpret that, your use is perfectly fine semantically, although I really must question your use of a list in the first place. Given that each article is probably much more text than a couple of lines, an unordered list just seems to make things clotty. I imagine you'll "style away" the bullets etc with css, and I can't see why you'd want a bulleted list of articles if the page is displayed with css disabled. I'd suggest merely
<article>
<h2>The header</h2>
<p>Some text</p>
</article>
<article>
<h2>The header</h2>
<p>Some text</p>
<p>And maybe another paragraph</p>
</article>
The building (a museum) has 7 levels (+3 to -3), each divided into different rooms/areas. Hovering over an area will reveal a popup describing that area.
I'm looking for some markup that will accurately represent the 7 levels and their areas.
The plan should make sense and be 'navigable' without any CSS/JS.
Edit: Some clarification, the markup only has to represent the 'semantic structure' of the building, not the spatial layout (CSS will add in the layout and graphics).
Smells like a nested, unordered list to me.
Sounds like a job for SVG? (Sample Adobe Building in San Jose)
I realize that this does use JavaScript, but if you have 7 floors * 10+ rooms? this would get rather hairy with pure CSS. You could use some <ul> elements to make nested levels of rooms, but if the building is this big, I don't think the list (even if rendered as blocks) would be meaningful to view.
Take a look at microformats, specifically the XOXO Microformat.
Using HTML5 (but shouldn't make a big difference if you'd like to use HTML 4.01):
If you want to represent the building with images, you can use an Image Map, consisting of map and area. The area (href attribute) could link to a page containing the detailed description of the room. The alt attribute could contain a short description of the room, like "Strawberry room (level 4)".
If the markup is more like a text-alternative (for example, if you'd use object, canvas or something like that), I would go with a heading structure:
<section>
<h1>The building</h1>
<section id="level-1">
<h1>Level 1</h1>
<section id="level-1-room-1">
<h1>Room 1</h1>
<p>description of room 1</p>
</section>
<section id="level-1-room-2">
<h1>Room 2</h1>
<p>description of room 2</p>
</section>
</section> <!-- #level-1 -->
<section id="level-2">
<h1>Level 2</h1>
<section id="level-2-room-1">
<h1>Room 1</h1>
<p>description of room 1</p>
</section>
<section id="level-2-room-2">
<h1>Room 2</h1>
<p>description of room 2</p>
</section>
</section> <!-- #level-2 -->
</section>
(for HTML 4.01, you would use div instead of section and adjust the heading level accordingly)