Five HTML5 tags to make your web content interactive and accessible
HTML5 introduced a variety of new tags that allow for improved semantics, readability and interaction. Five unique tags, <q>, <s>, <mark>, <ruby> and <details>, give your web projects a fresh and interactive feel while keeping your code clean and meaningful.
The <q> tag: inline quotations#
Use the <q> tag to mark up inline quotations in your content. It automatically wraps quotations in quotation marks, making it both semantically correct and easy to read. More importantly, screen readers recognize it as a quotation and announce it appropriately.
Use case: When you want to quote someone directly within a paragraph of text, the <q> tag tells both browsers and assistive technologies that this is a quoted phrase.
<p>As Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p>The output renders as: As Albert Einstein once said, "Imagination is more important than knowledge."
The <s> tag: strikethrough for corrections#
The <s> tag is perfect for showing edits, changes or items that are no longer relevant, like expired prices or outdated information. It visually strikes through the text, making it clear at a glance that this content no longer applies.
Use case: Show pricing changes, corrections or deprecated information while keeping the original text visible for context or historical reference.
<p>Our original price was <s>$49.99</s>, but now it's only $29.99!</p>The output renders as: Our original price was $49.99, but now it's only $29.99!
The <mark> tag: highlight important information#
The <mark> tag allows you to highlight text, emphasizing important information in a way that feels like a virtual highlighter. It is ideal for key points, dates, announcements or search results.
Use case: Draw attention to important dates, names, product features or any content that should stand out to you. Search engines and screen readers both recognize <mark> as highlighting.
<p>Don't miss our annual sale starting on <mark>November 20th</mark>!</p>The output renders as: Don't miss our annual sale starting on November 20th!
The <ruby> tag: annotations for non-English text#
The <ruby> tag is ideal for annotating foreign language text or pronunciations. It allows you to provide additional information, usually pronunciation, about a character or word. It is especially useful in languages like Chinese and Japanese where pronunciation aids are essential.
Use case: Provide pronunciation guides for words in non-Latin scripts, add furigana to Japanese text, or explain technical terms in their original language.
<p>As a programmer, mastering the word <ruby>कोड<rt>code</rt></ruby> is essential! After all, without <ruby>कोड<rt>code</rt></ruby>, we'd just be artists trying to draw with a keyboard!</p>The output renders as: As a programmer, mastering the word कोड (code) is essential! After all, without कोड (code), we'd just be artists trying to draw with a keyboard!
The <details> tag: expandable content sections#
The <details> tag is perfect for adding collapsible sections to your web pages. Use it to hide extra information, spoilers or advanced options, improving content organization and user experience. The <summary> child element provides the label users click to expand.
Use case: FAQ sections, additional resources, advanced settings, product specifications or any content that is useful but not essential at first glance.
<details>
<summary>Click to reveal the answer</summary>
<p>The answer is 42, the meaning of life according to "The Hitchhiker's Guide to the Galaxy."</p>
</details>The output renders as an expandable box with "Click to reveal the answer" as the visible label. When clicked, it reveals the hidden paragraph below.
Putting it together#
These HTML5 tags make your web content more interactive, accessible and organized. Each one solves a specific problem without requiring JavaScript or custom styling. Use <q> for quotes to add semantic meaning, <s> for edits to show context, <mark> for highlights to guide attention, <ruby> for annotations to support non-Latin readers, and <details> for collapsible content to improve information architecture.
The best part is that all five tags work in every modern browser and improve accessibility for screen readers and search engines at the same time. Try using them in your next project and you will find your code becomes both cleaner and more capable.
Conclusion#
If you have not already, it is time to roll up your sleeves and dive into these five HTML5 tags. They are not just for show; they are tools that solve real problems in web development. Whether you are quoting a thought from a friend, crossing out an outdated price, highlighting a key date, annotating text in another language, or hiding extra information in a collapsible box, these tags are here to help.
The joy of web development comes from building things that work well for everyone. Semantic HTML is how you make that happen. So go on, play around with <q>, <s>, <mark>, <ruby> and <details>. Your code will be better for it, and your users will thank you.
If you want the surrounding context, read Accessible website examples you can verify in a minute and SEO-friendly frontend architecture: the crawler view.
If you would rather have this done than do it: this is the kind of work behind our UI and UX design and WCAG and ADA compliance work.