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.
Related
Is the article (or section) element appropriate on a homepage?
I am not sure since the content of homepage is mostly a bunch of summaries referring to the content that should be included in an article element (on a separate page).
A rule of thumb I follow is to only use <article> or <section> if there is a corresponding <h#>.
So this is more appropriate:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<h2>Sub-Head</h2>
<p>
Hello.
</p>
</article>
Than this:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<p>
Hello.
</p>
</article>
Do not add a heading just to make it work. The value of a heading should be determined by the nature of the content, not a desire to shoehorn the elements you want.
With an example URL or image of your intended layout and content, I could offer more context.
Also, consider that if you have one contiguous piece of content (like how a sub-page generally is about one thing), you would not wrap the entire page in <article> but you would wrap it in <main> instead.
For a bit more, check out this piece on <section> from W3C HTML5, WCAG, and ARIA spec participant and accessibility advocate Léonie Watson.
I have an image, underneath it is a title and a subtitle. There are a number of these in a list. Clicking on them goes to an article.
<li>
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</li>
I need to link the above. I want the user to be able to click on the image, title or subtitle to get to the article page.
Should I wrap each element and create 3 x links:
<li>
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</li>
Or should I wrap the entire block:
<li>
<a href="/whatever">
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</a>
</li>
Would either method have an impact on SEO? Usability?
Google used to have a limit on the number of links on a page; reducing the number of link (especially links to the same place) was considered advantageous. Therefore, I'd recommend going with your second option of wrapping the contents of the <li> in an <a> tag.
Wrapping the entire contents in an anchor is better as it's more semantic and provides better code readability. There will be no impact on SEO as googles algorithms take all this into consideration (as wrapping multiple block level elements inside an anchor is allowed by the HTML 5 spec).
More importantly, in this code, make sure you have a title attribute on the anchor, an alt attribute on the img and use a better containing element. In this case you have a list of things, so something more semantic like an <article> tag may provide better SEO.
As part of a project mentioned in connection with another question I need to markup nested articles in semantic HTML5. There's a magazine article containing a number of short texts by different authors plus some editor comments. In the present HTML4 version it looks something like this:
<div id="article">
<h1>Main heading - a collection of texts</h1>
<p id="intro">
A general introduction to the whole collection by the editor.
</p>
<p class="preamble">
A few words from the editor about the first text.
</p>
<h2>First text heading</h2>
<p>First text. Lorem ipsum ...</p>
<p class="author">
Name of author of first text.
</p>
<div>*</div>
<p class="preamble">
A few words from the editor about the second text.
</p>
<h2>Second text heading</h2>
<p>Second text. Dolorem ipsum ...</p>
<p class="author">
Name of author of second text.
</p>
<p id="postscript">
Some final words about the whole collection by the editor.
</p>
<div>
I have been considering something like this in HTML5, but there are some elements where I simply don't know what's best:
<article>
<header>
<h1>Main heading</h1>
<ELEMENT>
General introduction
</ELEMENT>
</header>
<article>
<header>
<ELEMENT>
Preamble
</ELEMENT>
<h2>
Article heading
</h2>
</header>
<p>
Article text
</p>
<ELEMENT>
Name of author
</ELEMENT>
</article>
<div>*</div>
<article>
Second article ...
</article>
<ELEMENT>
Postscript by editor
</ELEMENT>
</article>
Should I use a p element with class names for the various introductions and postscript, or maybe aside elements? Something else? And the same question regarding the names of authors. The address element doesn't seem quite right there. A footer perhaps with some other element (?) in it?
Edit: Occasionally there are some images as well and the photographer is mentioned in small print at the end of the article ("Photo: John Doe."). Element x inside a footer?
I think the first question should be where to put the editor comment for an article. I can think of three ways:
(a) editor comment in the header of an article
<article class="author-text">
<header class="editor-comment"></header>
</article>
(b) editor comment in an article that is nested in an article
<article class="author-text">
<article class="editor-comment"></article>
</article>
(c) editor comment in a section that has the article as child
<section class="editor-comment">
<article class="author-text"></article>
</section>
You are using (a) in your question. I don’t think it’s the best choice, mainly because this article would contain content from different authors (that did not work together), so the concept of "nearest article element ancestor" for denoting authorship wouldn’t work. It’s used, for example, by the author link type and the address element.
(b) and (c) don’t have this problem. In (b), each editor could have their own authorship info, in (c) the authorship info for the editor would be taken from the parent article (which includes the whole collection of articles), so the editor would have to be same everytime.
The definition of article suggests that (b) is appropriate:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.
It would make sense to include this editor comment article in a header.
The authorship information could be placed in a footer. Only if this information contains contact information for the author, use an address element in addition (and only for these contact information parts).
So a single short text could look like this:
<article class="author-text">
<h1>First text heading</h1>
<header>
<article>
<p>Editor comment</p>
</article>
</header>
<p>First paragraph of the text …</p>
<footer>
<!-- text author information -->
<!-- use 'address' here if appropriate -->
</footer>
</article>
The whole collection could be structured like this:
<article class="text-collection">
<h1>Main heading</h1>
<p>General introduction</p>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<p>Postscript by editor</p>
</article>
Despite reading pages upon pages about the <article> and <section> tags I really don't understand how to apply them to my site.
I have a product page with related products at the end of the page. First I thought about doing something like this:
<section>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</section>
<section>
<header><h1>Related products</h1></header>
<article>
<img src="image1.jpg"><br/>Product 1<br/>Price
</article>
<article>
<img src="image2.jpg"><br/>Product 2<br/>Price
</article>
<article>
<img src="image3.jpg"><br/>Product 3<br/>Price
</article>
</section>
But, then I read some other blogs and it occured to me that maybe I should replace the <section> tags with <article> tags.
Which is right and why? Thanks.
<article> is for an independent piece of content that should make sense even if all of it's surrounding content is stripped away. <section> is more of a generic container that's quite similar to div tag and mostly used for content structuring. So the right code should be like this:
<article>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</article>
<article>
<header><h1>Related products</h1></header>
<section>
<img src="image1.jpg"><br/>Product 1<br/>Price
</section>
<section>
<img src="image2.jpg"><br/>Product 2<br/>Price
</section>
<section>
<img src="image3.jpg"><br/>Product 3<br/>Price
</section>
</article>
Also HTML 5 doctor's got a great Flowchart if you get confused picking the right HTML5 semantic element for your need. You can give it a try and see if it helps.
Section
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Article
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, 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.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Straight from the W3 http://www.w3.org/html/wg/drafts/html/master/sections.html
In their example, they have an article nested within a section within an article. I would say you are definitely using it correctly.
<article>
<header></header>
<section>
<h1></h1>
<article></article>
<article></article>
</section>
</article>
In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements.
The <"section"> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <"section"> elements containing <"article"> elements, and <"article"> elements containing <"sections"> elements.
You will also find pages with <"section"> elements containing <section> elements, and <article> elements containing <"article"> elements.
Right From : http://www.w3schools.com/html/html5_semantic_elements.asp
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)