strong vs font-weight bold em vs font-style italic

Question

Is there any real difference between using  lt strong gt  and  lt em gt  instead of the CSS properties   font-weight  bold  font-style  italic    Also  what is really the reason that both options exist  I could be wrong but didn t  lt strong gt  and  lt em gt  came on the scene quite a while after font-weight and font-style became standard CSS properties  If so  there must be some reason for them

User · Answer

lt strong gt  and  lt em gt  - unlike  lt b gt  and  lt i gt  - have clear purpose for web browsers for the blind    A blind person doesn t browse the web visually  but by sound such as text readers   lt strong gt  and  lt em gt   in addition to encouraging something to be bold or italic  also convey loudness or stressing syllables respectively  OH MY   amp  Ooooooh Myyyyyyy    Audio-only browsers are unpredictable when it comes to  lt b gt  and  lt i gt     they may make them loud or stress them or they may not    you never can be sure unless you use  lt strong gt  and  lt em gt

User · Answer

The problem is an issue of semantic meaning  as BoltClock mentions  and visual rendering   Originally HTML used  lt b gt  and  lt i gt  for these purposes  entirely stylistic commands  laid down in the semantic environment of the document markup   CSS is an attempt to separate out as far as possible the stylistic elements of the medium   Thus style information such as bold and italics should go in CSS    lt strong gt  and  lt em gt  were introduced to fill the semantic need for text to be marked as more important or stressed   They have default stylistic interpretations akin to bold and italic  but they are not bound to that fate

User · Answer

HTML represents meaning  CSS represents appearance  How you mark up text in a document is not determined by how that text appears on screen  but simply what it means  As another example  some other HTML elements  like headings  are styled font-weight  bold by default  but they are marked up using  lt h1 gt     lt h6 gt   not  lt strong gt  or  lt b gt    In HTML5  you use  lt strong gt  to indicate important parts of a sentence  for example    lt p gt  lt strong gt Do not touch  lt  strong gt  Contains  lt strong gt hazardous lt  strong gt  materials    And you use  lt em gt  to indicate linguistic stress  for example    lt p gt A Gentleman  I suppose he does  But there s no point in asking   lt p gt A Lady  Why not   lt p gt A Gentleman  Because he doesn t row   lt p gt A Lady  He doesn t  lt em gt row lt  em gt    lt p gt A Gentleman  No  He  lt em gt doesn t lt  em gt  row   lt p gt A Lady  Ah  I see what you mean    These elements are semantic elements that just happen to have bold and italic representations by default  but you can style them however you like  For example  in the  lt em gt  sample above  you could represent stress emphasis in uppercase instead of italics  but the functional purpose of the  lt em gt  element remains the same     to change the context of a sentence by emphasizing specific words or phrases over others   em       font-style  normal      text-transform  uppercase      Note that the original answer  below  applied to HTML standards prior to HTML5  in which  lt strong gt  and  lt em gt  had somewhat different meanings   lt b gt  and  lt i gt  were purely presentational and had no semantic meaning whatsoever  Like  lt strong gt  and  lt em gt  respectively  they have similar presentational defaults but may be styled differently     You use  lt strong gt  and  lt em gt  to indicate intense emphasis and normal emphasis respectively   Or think of it this way  font-weight  bold is closer to  lt b gt  than  lt strong gt   and font-style  italic is closer to  lt i gt  than  lt em gt   These visual styles are purely visual  tools like screen readers aren t going to understand what bold and italic mean  but some screen readers are able to read  lt strong gt  and  lt em gt  text in a more emphasized tone

User · Answer

The  lt em gt  element - from W3C  HTML5 reference   YES  There is a clear difference   The  lt em gt  element represents stress emphasis of its contents  The level of emphasis that a particular piece of content has is given by its number of ancestor  lt em gt  elements    lt strong gt      important content  lt em gt          stress emphasis of its contents   The placement of emphasis changes the meaning of the sentence  The element thus forms an integral part of the content  The precise way in which emphasis is used in this way depends on the language   Note    The  lt em gt  element also isnt intended to convey importance  for that purpose  the  lt strong gt  element is more appropriate  The  lt em gt  element isn t a generic  italics  element  Sometimes  text is intended to stand out from the rest of the paragraph  as if it was in a different mood or voice  For this  the i element is more appropriate    Reference  examples   See W3C Reference

[html] <strong> vs. font-weight:bold & <em> vs. font-style:italic

Examples related to html

Examples related to css