Skip to main content
Topic: Semantic Value of HTML Elements (Read 3522 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Semantic Value of HTML Elements

Semantics, you might've read me discussing it somewhere else but this topic is different. Here, the topic's focus is about the intended use of HTML elements, rather than the linked-data semantics I've discussed elsewhere. Aside from the spec there are many articles, guides and debates online already, so I'm not reposting here. I just wanted to share some insights with the folks building these templates.

Most folks know that with HTML5 we got some new semantic elements, but few seem to know we had some old ones, as well; in fact, nearly every element has an intended purpose except for a few that are intentionally generic, i.e., <div>, <span> and for the most part <b>.

Check this out, btw: https://madebymike.com.au/html5-periodic-table/


Anyway, as for that insight i mentioned.

First of all, Heading Tags, make sure you're using them right, they should reflect the outline  of the document (also i noticed use of a heading tag where a <header>+<h#> should have been).

Secondly, <time>. ALL dates* should be in a <time> element with a machinable value in the datetime attribute.
(* <meta> is also an acceptable element for (hidden) dates in some situations --like in a page's <head>. If <meta>, the content attribute's value should follow the same pattern as the datetime attributes.)
Valid Date/Time Formats
Code: [Select]
<time datetime="2017-05-22T17:20:41-0400">May 22, 2017, 05:20:41 PM</time>
or
<time datetime="2017-05-22">May 22, 2017</time>
or
<time datetime="2017-05">May 2017</time>
or
<time datetime="2017">2017</time>

or meta
<meta name="date" content="2017-05-22T17:20:41-0400" />
or
<meta name="date" content="2017" />

Thirdly, I've seen a lot of use of <span> or <div> where there should be a <p> instead.

Fourthly, <img> alt values, it's counter-productive to accessibility to leave them blank, especially since you have ARIA attributes added to the templates.
If it's a user-posted or linked pic, inform the alt attribute of that, if it's an icon, alt it so.

EDIT 4-b: re:ARIA. ARIA overwrites the semantic value of the element it's applied to, keep this in mind. --I haven't checked for correctness yet, btw.

Fifthly, never forget, the W3C's HTML Validator is your friend, the kind of friend that tells you when you're screwing up. I think i've only found one depreciated attribute in the templates, there was a name attribute on an anchor (<a>).

Lastly, the new semantic elements. I'm going to take a hard look at all the pages and figure this out, but a few points i wanted to make here.

<article> an article is a piece of data which can be understood solely by itself, so, a comment wouldn't fit this use since it relies on another piece of data being understood.

<section> defines a section of a document, yet has no hierarchical value, intentionally.
So this nesting indicates the <section> is part of a "complete thought".
Code: [Select]
<article>
  <section>
  </section>
  <section>
  </section>
</article>

and this use of a <section> means something different:
Code: [Select]
<section>
  <article>
  </article>
  <article>
  </article>
</section>

The proper use depends on the context.

More on all this later, just getting the topic started.



Last Edit: May 22, 2017, 07:03:03 pm by Atlas

Re: Semantic Value of HTML Elements

Reply #1

Since I was the one that added some of those html5 tags, let me share my thoughts.
First: I based my decisions on readings on the internet (including relevant parts of the specifications, but not so deeply), that led me to the conclusion not even those that wrote the specification had very clear in mind what they wanted to do with those tags (i.e. they are so generic they can be used in almost any way and can be argued in almost any way they are used).
Second: I used section mostly randomly, but usually with the idea that it delimits "groups" of related content (e.g. the body has a section that includes the header (with the logo, the main menu, etc.), another that contains the main part of the page (the posts), and a footer)
Third: I may have used nav way too much.
Bugs creator.
Features destroyer.
Template killer.

Re: Semantic Value of HTML Elements

Reply #2

Quote from: emanuele – Since I was the one that added some of those html5 tags, let me share my thoughts.
First: I based my decisions on readings on the internet (including relevant parts of the specifications, but not so deeply), that led me to the conclusion not even those that wrote the specification had very clear in mind what they wanted to do with those tags (i.e. they are so generic they can be used in almost any way and can be argued in almost any way they are used).
Second: I used section mostly randomly, but usually with the idea that it delimits "groups" of related content (e.g. the body has a section that includes the header (with the logo, the main menu, etc.), another that contains the main part of the page (the posts), and a footer)
Third: I may have used nav way too much.

I haven't found any html5 elements in the default template for my version (current, i think?), although i have viewed-source here and seen use of <article>.  As for doubts on <nav> (again, not in my templates), it's okay to have more than one if that's your concern.

Yes on what you said about <section>, btw.

second thought, i'm unsure if <nav> is in my templates.


Also, i realize using <p> in a forum setting is kinda hard since you don't know what the user will post, but perhaps a check to see if there are any block level elements in the post and if not use a <p>.

PS , I intend to give you guys my templates when i'm finished editing.
Last Edit: May 22, 2017, 08:10:19 pm by Atlas

Re: Semantic Value of HTML Elements

Reply #3

QuoteI haven't found any html5 elements in the default template for my version
Might be because  you're     looking at v1.0..x, while the new markup is in v1.1-dev...

Quote a section that includes the header (with the logo, the main menu, etc.),
the header tag

also, the quick search is inside the aside tag but doesn't relate to the page's main content. Is a bug?

(I use MDN to figure markup out, plus my JS issues)
LiveGallery - Simple gallery addon for ElkArte

Re: Semantic Value of HTML Elements

Reply #4

Speaking of <aside>, i changed the News container to an <aside>.

Re: v1.0..x, haven't check but that's going to suck considering my edits,, i assumed i had the newest version since my install, like 2 weeks ago, but hmm, i did install from my CPanel.

Re: Semantic Value of HTML Elements

Reply #5

Yeah, 1.1 is in release candidacy

you can use unified diffs to compare your changes vs the release. I did that when I forgot to track my edits.
LiveGallery - Simple gallery addon for ElkArte

Re: Semantic Value of HTML Elements

Reply #6

+1 on time

Quote<article> an article is a piece of data which can be understood solely by itself, so, a comment wouldn't fit this use since it relies on another piece of data being understood.
Although the spec says that, it also contradicts itself beyond the general degree in which articles interact with and respond to each other by explicitly mentioning forum posts and comments.

Quote from: https://www.w3.org/TR/html5/sections.html#the-article-elementThe 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.

So basically it's more that an article isn't a single section or paragraph of a comment.

It then continues by saying:

QuoteWhen 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.

So… forum posts nested under the OP?

Re: Semantic Value of HTML Elements

Reply #7

Technically, forums are a pain in any case.
Topics are spread across multiple pages, and one could argue that each page may not stand by itself, but would need at least all the previous posts to understand the context.
Bugs creator.
Features destroyer.
Template killer.

Re: Semantic Value of HTML Elements

Reply #8

Re: Article
I believe the confusion about <article> is in the association with "news article". I interpret it as to mean an article, as in, "an article of clothing".


Re: paginated Article, something like...
Code: [Select]
<!DOCTYPE html>
<html>
<head>
<title>Pg.1/10 | Topic Subject | Board Subject | Forum Name</title>
</head>
<body>
<header>
<h1>forum name</h1>
</header>
<section>
<header>
<h2>board name</h2>
</header>
<article>
<header>
<h3>topic subject</h3>
<nav>
<h4>Page 1 of 10</h4>
<a href="?prev_next=prev">prev</a>
<a href="?prev_next=next">next</a>
</nav>
</header>
<div class="reply"></div>
<div class="reply"></div>
<div class="reply"></div>
</article>
</section>
</body>
</html>

Post that in the W3C's Validator with the outline checkbox ticked. The <h4> applies to the <nav>, if you move it to it's parent <header> and resubmit, you'll see the validator suggests it belongs in the <nav>
Last Edit: May 23, 2017, 06:24:08 pm by Atlas

Re: Semantic Value of HTML Elements

Reply #9

Quote from: emanuele – Technically, forums are a pain in any case.
Topics are spread across multiple pages, and one could argue that each page may not stand by itself, but would need at least all the previous posts to understand the context.
That's no different for anything slightly longer, including the HTML spec (ever tried to load the single-page view? Lol).

Btw, this comment box is super slow on my phone?