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)
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
There are cases when text and image content is too large to be put onto one single page, but context is important for the content in question, so displaying it explicitly makes sense from the UX perspective. For example, this content could be chapters of a novel, parts of a long article, entries in a specialized list of items:
A Tale in Three Parts
The Beginning
The Middle
The End
Local Flora and Fauna
Badger
Mushroom
Snake
The answer would've been more simple if everything was on the same page, but what if these are separate standalone pages? What should be the proper way to semantically mark headings in that case?
Option 1
Use same h1 but different h2 on all pages:
<article>
<h1>Main Title</h1>
<h2>Title of Specific Part</h2>
<p>...</p>
</article>
Option 2
Use h1 for both article and section even though there is only a single section, and have same top-level h1 on all pages:
<article>
<h1>Main Title</h1>
<section>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</section>
</article>
Option 3
Optimize for machines, fake styling for humans:
<article>
<p class="styled_like_h1">Main Title</p>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</article>
Option 4
Optimize for machines and hope humans figure it out from surrounding navigation:
(<nav><ul>...breadcrumbs...</ul></nav>)
<article>
<h1>Title of Specific Part</h1>
<p>...</p>
</article>
Using your example of a novel displayed as a chapter per page, it would make sense to use a structure like this:
Title Page
<head>
<title>A Tale in Three Parts</title>
</head>
<body>
<main>
<h1 class="title">A Tale in Three Parts</h1>
<p>Lorem ipsum...</p>
<nav>
<h2>Table of Contents</h2>
<ol>
<li>The Beginning</li>
<li>The Middle</li>
<li>The End</li>
</ol>
</nav>
</main>
</body>
Chapter Page
<head>
<title>A Tale in Three Parts: The Beginning</title>
</head>
<body>
<nav aria-label="Breadcrumbs">
<ol>
<li>A Tale in Three Parts</li>
<li>The Beginning</li>
</ol>
</nav>
<main>
<h1 class="chapter">The Beginning</h1>
<p>Lorem Ipsum...</p>
</main>
</body>
When thinking about HTML semantics, you should think about it in the context of the HTML document (the page) rather than the broader context of the full content (in this case, the novel). The elements should make sense for the content on the page.
Also remember, semantics aren't just for machines. Users with screen readers, or users for whom stylesheets don't load also benefit from semantic elements. Relatedly, the appearance of text shouldn't dictate which element is chosen. If a large, unique style is desired for a title page, and smaller heading styles are desired for chapter pages, that should be managed through CSS. Both should be <h1> elements on their respective pages.
Additionally, using <article> to wrap the content of each page isn't appropriate in this example, because articles are meant to be:
"...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable..."
— MDN Web Docs: The Article Element
In the case of a novel, the individual chapters aren't independently distributable.
This Question was conceived when studying the answer to StackOverflow question #37370944.
In my database, I have html markup, for which I'd like to give my html-agnostic web-app users to have a tool to edit it in a browser. This is referential materials, mostly notes and source citations. For this purpose I use an html form generated by the server side, and a JavaScript widget, i.e. ContentTools, which, on form submit-button click event, collects a string of resulting html markup from the edited region and sets it as value on the designated form field.
The problem is that, as I discovered, ContentTools doesn't allow editing of the nested markup, e.g. inside html block elements, i.e. <div>, <section>, <article>, <aside>, etc., out of the box or at all (I do not know). To demonstrate this, I modified a forked JSFiddle example provided by the StackOverflow question #37370944 mentioned above. So, please take a look at this fiddle.
There are three link-buttons described in the markup:
The first one is a stand-alone <a> which is as an immediate child of the wrapper div holding the edited region content (<div data-name="main-content" data-editable="">).
The second link-button is placed inside a nested <div> with set attribute data-ce-tag="text" to presumably enable recognition of the content as editable text.
The third link-button is placed inside <p> tag which is as an immediate child of the wrapper div.
All three link-buttons wrapper-elements (<a>, <div> and <p>) have special css class "js-has-anchor" to enable change of the tools on the tool panel via the "focus" event bound to the editor Root.
It turns out, the "focus" event is only triggered for <p> (case 3) elements in the document, not for <div> (case 2) or <a> (case 1). As a result, only for the 3rd link-button a set of panel tools is updated. Moreover, the <div> and <a> elements cannot be edited.
The html markup in my database is mostly a mess, previously edited in CKEditor in some cases, or entered directly by hand. I'd like to make all available content to be readily recognized by ContentTools as editable (not "static") including nested structures similar to the one in the sample below. The main idea of the provided html sample is that it's a nested structure (not just a list of <hN>, <p> and <img> elements as in the edited page__content region from the ContentTools demo), every <section> consists only of <article> elements, and each article consists of a header(<hN>) and either another section, or a wrapping <div> holding all the content of this article.
And I'd like this structure not to be broken if it is already in place, and ideally enforced if it is not there yet.
But all this is a single region which is persisted in one text field of my database (no separate regions are possible).
<h1>Section 1 heading</h1>
<section class="mb-5">
<article>
<h2>Sub-Section 1.1 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.1.1 heading</h3>
<div>
<p>Some text</p>
<figure>
<img src="pic.jpg" alt="Some text" style="width:100%">
<figcaption>Fig.1 - Picture Caption</figcaption>
</figure>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.1.2 heading</h3>
<p>Some text</p>
<figure>
<img src="another_pic.jpg" alt="Some other text" style="width:100%">
<figcaption>Fig.2 - picture caption</figcaption>
</figure>
</article>
</section>
</article>
<article>
<h2>Sub-Section 1.2 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.2.1 heading</h3>
<div>
<p>Some text</p>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.2.2 heading</h3>
<p>Some text</p>
</article>
</section>
</article>
</section>
So, is it at all possible with ContentTools, and I'd appreciate an example with "customized" tool panel content from the JSFiddle to work for all link-buttons (and all of them be editable), not only for the one wrapped in the <p> tag.
Is the structure below correct or is the section tag not needed?
For SEO, assuming the relevant keywords are the page title not the site title, is the structure bellow the best optomisation? Thanks
<header>
<h1>Site Title</h1>
</header>
<section>
<h1>Page Title</h1>
<p>Page Content Here</p>
</section>
Don't abuse the usage of section and article tags using them for structure, instead keep using divs.
In html5, when using headings and sections, you must check that each section has its own title. You can use the outliner to see how is the structure.
http://gsnedders.html5.org/outliner/
According to your case you'll notice that the Site Title has still more relevancy than the Page Title. That's okay. But better use a div for dividing the header from the content.
// Reply 12/03/01
You can try using some weird position absolute to achieve your goal:
First of all, the section must have a heading, if not it will be null.
<header>
<h1 id="position-me-in-section">Page Title h1</h1>
</header>
<div id="content">
<section>
<h6 id="position-me-in-header">Site Title h6</h6>
<p>Page Content Here</p>
</section>
</div>
This is how I would do it. The <article> tag links the related content together, you can also have multiple articles on one page etc
<header>Site Title</header>
<article>
<header>Page Title</header>
<p>Page Content Here</p>
<footer>Page Footer</footer>
</article>
<footer>Site Footer</footer>
Really depends on how or if you plan to componetize and/or syndicate your content and then it's however it suites you best. There are no "issues" with how you have it now other than you only want to use a single "H1" per document. On the flip side - the "H2", "H3" etc can be used multiple times with no negative SEO.
The html5doctor link about section shared is a good resource but also consider these:
http://html5doctor.com/the-article-element/
http://www.impressivewebs.com/html5-section/
http://webdesign.about.com/od/html5tags/a/when-to-use-section-element.htm
My website has a profile page. I have something like:
<h1>Foo bar profile</h1>
<div>
<h2>Address</h2>
<p>Foo bar street, 55</p>
<p>Foo city</p>
</div>
<div>
<h2>Contact information</h2>
<p>foo#bar.com</p>
<p>55-5555-5555</p>
</div>
Should I use divs or sections to wrap this kind of content? With sections, should i change h2 to h1? I don't know what is right.
Thank you.
Why not make use of the <address> tag?
<h2>Contact information</h2>
<address>
foo#bar.com<br />
55-5555-5555
</address>
its just fine..
still if u want to learn html5 i will recommend
Tutorials:
http://slides.html5rocks.com/#slide1
(built using HTML5)
http://diveintohtml5.ep.io/
http://html5tutorial.net/
Demos: http://html5demos.com/
I wouldn't call that a <section> although that all might be contained in a <section class="contact">
I recommend the hCard microformat or the HTML5 vCard microdata definition derived from it. It's a set of well defined class names to use to define the pieces of your contact information.
You can use what tag types you want, set the appropriate classes, then style them with CSS - for example is "Address" is not really a 2nd level heading just style it to look like one (if that's the look you want) based on it being within a <div class="vcard">
You might start out like...
<section class="userprofile">
<div class="vcard">
<div class="adr">
... etc. ...
</div>
</div>
</section>
The HTML5 way uses itemprop instead of class - see http://www.html-5.com/microdata/rich-snippets/addresses/ for some more explanation and samples.