when to use <em> and <strong>?

[John Salerno]

I understand that you shouldn't use these tags to italicize or bold
text, but what exactly is meant when you want to "emphasize" text? It
seems like any use of <em> is somehow tied to the fact that it will use
italics, and I wonder if people would use it as much if it didn't. So
I'm trying to grasp how you really use it for markup only.

Also, as an example, what if I had a sentence like this:

"The word void in a function indicates that there is no return type."

If I'd like 'void' to stand out from the rest of the sentence (and
ideally have it italicized), should I use <em>? I know I should have
italics as a consideration when I choose <em>, but like I said it's hard
not to.

The only other option I can think of would be:

<span class="keyword">void</span>

but is that a better way to do it?

 

[Jonathan N. Little]

I understand that you shouldn't use these tags to italicize or bold
text, but what exactly is meant when you want to "emphasize" text? It
seems like any use of <em> is somehow tied to the fact that it will use
italics, and I wonder if people would use it as much if it didn't. So
I'm trying to grasp how you really use it for markup only.

Also, as an example, what if I had a sentence like this:

"The word void in a function indicates that there is no return type."

If I'd like 'void' to stand out from the rest of the sentence (and
ideally have it italicized), should I use <em>? I know I should have
italics as a consideration when I choose <em>, but like I said it's hard
not to.

Basically I think <em> is by default tied to italic by tradition in
print, but of course you can always change this to something more to
your liking in your stylesheet

The only other option I can think of would be:

<span class="keyword">void</span>

but is that a better way to do it?

Depends if you are just highlighting a specific word or phrase then 'em'
and 'strong' will do but if there is some underlining theme to the
emphasis then I could see where classes can be very useful, e.g.

..keyword { color: #080; }
..constant { color: #f00; }
..command { color: #008; }

<span class="keyword">void</span>
<span class="constant">NULL</span>
<span class="command">sub</span>

which gives you the flexibility if latter you rethink the color coding a
bit garish then all you have to do is change your stylesheet...

..keyword, .constant, .command { color: #f00; font-weight: bold; }

 

[John Salerno]

If I'd like 'void' to stand out from the rest of the sentence (and
ideally have it italicized), should I use <em>? I know I should have
italics as a consideration

*shouldn't* have it as a consideration...oops!

 

[Joel Shepherd]

Also, as an example, what if I had a sentence like this:

"The word void in a function indicates that there is no return type."

If I'd like 'void' to stand out from the rest of the sentence (and
ideally have it italicized), should I use <em>?

Probably not: there's more going on there than simple emphasis. It's not

I know I should have italics as a consideration when I choose <em>

Actually, you shouldn't. You should think of <em> as saying "the content
should be presented with emphasis". Italics don't enter the picture.
It's true that many browsers use italics to denote emphasis but there's
no requirement that they or you do so.

The only other option I can think of would be:

<span class="keyword">void</span>

but is that a better way to do it?

I think so. The fact that in some contexts "void" is a keyword is
semantically important. HTML has no way to represent that bit of
semantics (though maybe <code> comes close: I forget if it's deprecated
or not). Emphasis is far enough removed from status as a programming
language keyword that it's probably not a good idea to, uh, overload it
with that meaning.

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

It
seems like any use of <em> is somehow tied to the fact that it will use
italics,

In graphical UAs perhaps.

and I wonder if people would use it as much if it didn't. So
I'm trying to grasp how you really use it for markup only.

Try listening to it with a screen reader. That may give you a different
perspective.

 

[Mark Parnell]

Deciding to do something for the good of humanity, "Jonathan N. Little"

Depends if you are just highlighting a specific word or phrase then 'em'
and 'strong' will do but if there is some underlining theme to the
emphasis then I could see where classes can be very useful, e.g.

.keyword { color: #080; }
.constant { color: #f00; }
.command { color: #008; }

No argument there, but...

<span class="keyword">void</span>
<span class="constant">NULL</span>
<span class="command">sub</span>

Better to use <em class="keyword"> etc. That way in non-graphical UAs,
and those that don't support CSS, it will still be emphasised.

 

[David Dorward]

Better to use <em class="keyword"> etc.

Looks more like a job for <code class="keyword"> to me.

 

[Mark Parnell]

Deciding to do something for the good of humanity, David Dorward

Looks more like a job for <code class="keyword"> to me.

Heh - point taken.

I wasn't looking at the specific example given by the OP - just the fact
that if it is meant to be emphasised, <em> is the correct element,
regardless of what styling you may want to apply.