Menu
Sorry if this is sounding fussy but I'm about to produce a whole lot of HTML 5 and I was hoping someone out there had come up with some clear rules for when to use the <em>, <strong> and <mark> tags. The spec suggests some subtle differences but I keep finding myself asking whether I want the text bolded, italic or yellow high-lighted, which makes me think I should be using CSS instead. (And sometimes I wonder why I even bother when I could just as easily write "Cats are NOT dogs.")
446
The <strong> tag should be used to indicate strong importance, seriousness, or urgency, like to indicate key phrases in a text for someone skimming it. The <em> tag should be used to represent stress emphasis, like when you'd read the emphasized text in a different tone of voice.
Both of them emphasize text. The <em> tag shows text as italics, whereas <strong> makes it bold.
Use the <em> element to mark text that has stress emphasis. Another accepted use for <strong> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.
b or i means you want the text to be rendered as bold or italics. strong or em means you want the text to be rendered in a way that the user understands as "important".
I keep finding myself asking whether I want the text bolded, italic or yellow high-lighted, which makes me think I should be using CSS instead.
That's 100% correct. Markup is for describing content, not appearance. That being said:
http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html
The <strong> element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
The <em> element represents stress emphasis of its contents. The placement of stress emphasis changes the meaning of the sentence.
The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<mark> doesn't really have relevance to content, only context (e.g. marking content that matches a search term, misspelled words, selected content in a web app, etc.).
<strong> denotes important text, but does not affect meaning.
<em> denotes important text and affects the meaning of the content by saying that it should be read/spoken with emphasis.
You are free to use CSS to change browser defaults for all of these elements.
51
Remember HTML is a markup language. Inside it you write the content of the page. If you use "Cats are NOT dogs", search engines like google don't know whether "DOGS" is a distinguished phrase or not (of course your readers will notice it, though). If you use CSS, which is a styling language, same thing happens: search engines don't recognize "DOGS" as distinguished text but users do.
When you use the elements of your question, they indeed give information. They're called semantic elements. For example it's more informative for the search engine (or screen reader or speaking software) to use element <h1> for titles than just using <p> and through CSS making it big and bold. Another example is using alt and title attributes in img, 'cause engines don't understand what image you have in src.
So, even though any of the HTML elements <em>, <strong>, <mark> are noticeable for the user, they give different meaning to the text inside them for the engines.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
