Hello all. I am learning about separating content and structure from presentation and i am wondering where dose the <em> tag stand? I would assume that it is a presentation tag but would it go against the concept of separating presentation from structure?
You should use <em> to mark emphasised text - that is a semantic tag, and a 100% correct use of HTML. The default display of emphasised text is italics, but you can change that if you want. If you want to use italics for reasons other than emphasis then you should consider whether you can apply a style to the text container, whether to use <i> or whether to use <span>. Remember, just because an element may have a default presentation dies NOT mean it’s a presentational element. It may be important to use that tag to convey contextual information, such as here.
I was sort of putting things in black in black in white, such as <em> and <strong> tags are presentational and should be replaced by css and <h> and <p> tags are structural elements that define html page. But if i understand you correctly if a tag such as <em> defines an important structure of the page then it should be use?
No they are structural elements that identify that a web reader should use emphasis when reading out that part of the text and that web browsers should also use some form of emphasis when displaying that text - the emphesis does not necessarily need to be making the emphasised text bold or italic - you might use CSS to define that the emphasis should be applied using different colours.
Basically ALL the HTML 4 tags have a legitimate structural use. It is only when you start using HTML 3.2 or HTML 5 tags that you start to find tags that have no real structural meaning. Of course that doesn’t mean that the particular use of the tag is correct - for example using <i> to apply emphasis is misuse of that tag but using it to make the make of a ship appear in italic text is appropriate structural use because being in italic text is a structural part of how ship names are usually identified.
As Stephen pointed out in the previous post both EM and STRONG are structural tag, each with it’s own separate semantic meaning. One should not confuse EM and STRONG with I and B that look the same ,respectively, but the latter pair are purely presentational and has no semantic significance whatsoever. In other words, EM is not intechangale with I nor is B with STRONG!
If you merely want something BOLD it is more concurrent with separation of structure and style to use a SPAN with a class that matches with the desire style and avoid B ( and I) all together. I will admit I use B and I sometimes as specialty SPANs.
That that is knowing that neither tag carries any semantic meaning I find it easier to write:
<a href=“#”>Link<i>…</i></a>
a i { my style}
than
<a href=“#”>Link<span class=‘mystyle’>…</span></a>
a .mystyle { my style}
But once you comprehend the basic of a rule you will see when and how it can be ‘bent’
Hope that helps.