CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Proper semantic structure for article author byline  (Read 380 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Proper semantic structure for article author byline
« on: 25 May 2022, 01:25:23 pm »
What is the proper semantic structure to use for an article's byline/
Right now I have it like this:
article
   footer
      h2 - author name
      img - author image
      p - info about the author, links, etc.

Is that correct or should it be something else?

Thanks,

Andrew

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Proper semantic structure for article author byline
« Reply #1 on: 25 May 2022, 02:24:24 pm »
Quote from: AndrewTraub
What is the proper semantic structure to use for an article's byline/

Does this link help...

The HTML article element

coothead
« Last Edit: 25 May 2022, 02:32:28 pm by coothead »
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Proper semantic structure for article author byline
« Reply #2 on: 25 May 2022, 04:41:49 pm »
First question is if these are even articles in the sense of a structural / grammatical article -- such as the Articles of Confederation or subsections of the Constitution, or if you're just calling an article because it's like a newspaper or magazine article,  Technically the article tag is NOT for the latter!

That said your use of a footer for the article with a H2 describing what (who) the information that follows is about seems almost spot on to me., but suspect in practice it would/should be a H3, since I would assume your article would have a title that would be the H2, thus the content of the footer is a subsection of the header's H2, not a sibling to it.

Code: [Select]
<!-- assumes page has H1 for site-wide unifying header -->

<article>
<header>
<h2>Article Title</h2>
<time datetime="2011-11-18T14:54:39.929">18 Nov 2011 at 2:54pm</time>
</header>
<p>
Article content here
</p>
<footer>
<h3>Author Name</h3>
<img src="images/avatar.pgn" alt="author's avatar">
<p>
More info about Author
</p>
</footer>
</article>

That's why complete markup is important, as the heading depths are determined by if they're kin or descendants. Note that if your article doesn't have a numbered heading at the start, it may in fact be gibberish / confusing to even use a header in the footer.

Note again that if this were an "article" in the sense of a newspaper or magazine "article" then it's not an "article" as in an "item or particular belonging to a set". Though if you have a lot of them in a common section, then they could be both articles and articles.

« Last Edit: 25 May 2022, 04:44:03 pm by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Proper semantic structure for article author byline
« Reply #3 on: 25 May 2022, 04:51:56 pm »
Does this link help...

The example section is a stunning use of proper semantics, exactly the type of code I'm always trying to advocate for.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article#examples

With ONE minor flub. Classes for nothing on the ARTICLE tags. :D
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement