Explain Codes LogoExplain Codes Logo

Which HTML5 tag should I use to mark up an author’s name?

html
semantic-structure
microformats
microdata
Nikita BarsukovbyNikita Barsukov·Dec 28, 2024
TLDR

To mark up an author's name in HTML5, it's best to utilize the <footer> element within an <article>. Nest the author’s name inside a <cite> tag.

Example:

<article> <h1>// Catchy title = more clicks!</h1> <p>// Content that makes you say "Hm, fascinating!"</p> <footer>Author: <cite>// Hey, that's me!</cite></footer> </article>

Key concepts:

  • <footer>: A cozy home for author details within an article.
  • <cite>: Turns the author’s name into a VIP.

Closing the semantic gap

Here we explore strategies to create a robust semantic structure for your HTML5 code, building on the fast answer above.

Charting the Optimal Course

The <header> element is used within an <article> to introduce the content. To represent the author's contact info, we use <address> nested inside <footer>. If the author has their very own web page, use the <a> tag inclusive of a rel="author" attribute to link the reader there.

Above and Beyond with Microformats & Microdata

Use microformats like hCard, and itemprop attributes with microdata, to dial up the machine-readability of your content so that search engines and other web services can understand the author's information more accurately.

Speaking the language of time

Pay homage to the publication date using the <time> tag supplemented with datetime this should be placed adjacent to the author's name forming a coherent byline.

Example Code

<article itemscope itemtype="http://schema.org/Article"> <header> <h1 itemprop="headline">// "Clickbait! Timeless classics still draw clicks!"</h1> <p><time itemprop="datePublished" datetime="2023-01-15">// "A moment in time..."</time></p> </header> // "Thrilling content goes here..." <footer> <address itemprop="author" itemscope itemtype="http://schema.org/Person"> Written by: <a href="http://www.authorwebsite.com" rel="author" itemprop="url"><span itemprop="name">// "I wrote this. Hi, Mom!"</span></a> </address> </footer> </article>

Key concepts:

  • <header> & <footer>: Bookends for your introductory and concluding content.
  • Microdata: itemprop, itemscope, and itemtype attributes going the extra mile in describing content.
  • <time> tag: A temporal signature for publication dates.

Closing Thoughts

The tags and techniques described here not only apply to marking up an author's name but, they provide a robust foundation towards understanding the essence of semantic HTML and its practical application. Practice, experiment, and continue to build on these concepts to master the world of coding. And remember, no matter how daunting the syntax may be, a good joke in the comments can always lighten the mood!

Happy Coding! 👩‍💻

For further information, please refer to the accurate and reliable sources mentioned below.