Thread by @swapnakpanda

15 Useful HTML Elements for Text Contents

⇩

📋 What shall we explore?

➊ abbr
➋ dfn
➌ em
➍ strong
➎ mark
➏ small
➐ q
➑ blockquote
➒ cite
➓ var
➊➊ code
➊➋ kbd
➊➌ samp
➊➍ data
➊➎ time

💭 Why is this Thread?

❑ In a typical web page, we render varieties of text contents. The context of few contents may vary from others.

❒ Sometimes we may have to highlight them semantically for SEO and Accessibility purposes.

❑ Let's explore 15 such HTML elements.

➊ abbr

❑ The <abbr> HTML element represents an abbreviation or acronym.

❒ Its title attribute can provide an expansion or description for the abbreviation.

Use it when you want to
✧ provide expansion or description
✧ treat it separately (like styling)

➋ dfn

❑ If you want to indicate "a term" being defined within the context of a definition phrase or sentence, use <dfn> for that term.

❒ If the <dfn> element has a title attribute, it must contain the term being defined and no other text.

➌ em

❑ The <em> HTML element marks text that has stress emphasis.

❒ If you have a word or, few words in a sentence which have a stress emphasis compared to surrounding texts, use <em> element.

❑ It's often shown in italics. But that's browser dependent.

➍ strong

❑ The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency.

❒ Use it for a sentence or, few words that is of great importance to the whole page.

❑ It's often shown in bold. But that's browser specific.

➎ mark

❑ The <mark> HTML element represents text which is "marked" or "highlighted" for reference or notation purposes.

❒ One of the best use cases of using this element is to indicate the words that matched a search operation.

➏ small

❑ <small> renders the text within it one font-size smaller.

❒ It represents side-comments and small print, like copyright and legal text.

➐ q

❑ The <q> HTML element indicates that the enclosed text is a "short inline quotation".

❒ This element is intended for short quotations that doesn't require paragraph breaks.

❑ Most browsers display the quoted text inside a quotation marks (" and ")

➑ blockquote

❑ The <blockquote> HTML element indicates that the enclosed text is an "extended quotation".

❒ This is usually rendered with an indentation.

➒ cite

❑ The <cite> HTML element is used to describe a reference to a cited creative work.

❒ The creative work could be a tweet, a web page, a blog post, a song, a film, a game, a painting, a legal case report etc.

❑ Most browsers display the cited text in italics.

➓ var

❑ The <var> HTML element represents the name of a variable in a mathematical expression or a programming context.

❒ Most browsers may render it in italics.

➊➊ code

❑ The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.

❒ By default, the content text is displayed using the browser's default monospace font.

➊➋ kbd

❑ The <kbd> HTML element represents a span of inline text denoting textual user input from a
❍ keyboard
❍ voice input
❍ any other text entry device

➊➌ samp

❑ The <samp> HTML element is used to enclose "inline text" which represents sample output from a computer program.

❒ By default, the content text is displayed using the browser's default monospace font.

➊➍ data

❑ The <data> HTML element links a given piece of content with a machine-readable translation.

❒ The value attribute of this element specifies the machine-readable translation of the content.

➊➎ time

❑ The <time> HTML element represents a specific period in time.

❒ It may represent one of the following:

❍ A time on a 24-hour clock
❍ A precise date in the Gregorian calendar
❍ A valid time duration

⚠️ Notice ⚠️

❑ Did you notice? I didn't provide any code or, sample visuals for any of these elements.

❒ Reason? I want you to explore these on your own. I have just given the reference. You could practice on your own to have a solid understanding.

💭 Feedbacks

✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?

Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.

End of 🧵

Hey 👋 I am a Tech Educator from India 🇮🇳

I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.

Are you interested? I am sure, you are.

To never miss anything, Follow Me ✅