Which HTML5 tag should I use to mark up an author’s name?
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:
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
Key concepts:
<header>
&<footer>
: Bookends for your introductory and concluding content.- Microdata:
itemprop
,itemscope
, anditemtype
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.
Was this article helpful?