SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Difference between Bold and Strong tag of HTML

    Hi everyone,

    plz tell me the
    Difference between Bold and Strong tag of HTML

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The b and i element types indicate that the content should be boldfaced or italicised, respectively, normally to adhere to some typographic convention. They don't imply any sort of emphasis, only a presentational change.

    The em and strong element types indicate that the content should be emphasised or strongly emphasised, respectively. They don't imply any specific presentation, although all contemporary browsers render em in italics and strong in bold by default.

    Thus, b and i are presentational, while em and strong are semantic.
    Birnam wood is come to Dunsinane

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Perhaps an easy way to consider the difference is to think about how a web reader will speak the content based on the surrounding tags. With <em> and <strong> the reader can apply emphasis and strong emphasis to the content in the way that it says it. The web reader cannot speak in italic or bold and so there is no obvious way that the web reader should handle those tags - it would all depend on what you had in the style sheet to define how those thags should affect the way their content is spoken.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Being that they are two totally different tags, it is like comparing <font size="6">..</font> to a h1 tag.

    If you want an element bold, use css to handle the styling. I really wish that the strong tag was not set to bold by default. I think it really confuses a lot of developers.

    Listen to Tommy and Stephen.

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I to some extent disagree with the B and I tags being purely presentational. There are cases where it is semantically required for text to be italiced (and probably boldfaced as well). In these cases, it would be wrong to use CSS to add the effect.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @C. Ankerstjerne - Could you show an example of when it is 'proper' to use a b or i tag?

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Yeah… its never appropriate to use b or i in place or strong of em. Bold and italic describe presentation while em and strong outline hierarchy.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    There are cases where it is semantically required for text to be italiced (and probably boldfaced as well).
    Can you give an example? If you're thinking about typographic conventions, then it doesn't have to do with semantics. The semantic way to mark up the name of a ship would be <ship>Titanic</ship>, but HTML doesn't have that semantic richness. Since ship names are traditionally italicised, the correct way to mark it up in HTML would be <i>Titanic</i>.

    Quote Originally Posted by oddz View Post
    Yeah… its never appropriate to use b or i in place or strong of em.
    I'm sorry, but that's plain wrong. Em and strong denote emphasis. Thus <em>Titanic</em> would be wrong unless you really mean to emphasise the name, whereas <i>Titanic</i> is semantically neutral and only denotes italics. You could use <span class="ship">Titanic</span> and use CSS to make it italic, but you'd gain nothing.

    Quote Originally Posted by oddz View Post
    Bold and italic describe presentation while em and strong outline hierarchy.
    Hierarchy? How so? They denote semantic emphasis, that's all.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    My favorite example is book titles in bibliographical references. As per ISO 690, these has to be italicised, so using CSS would not convey the full meaning.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @C. Ankerstjerne

    You might be correct but, would 'emphasizing' a title be incorrect?

    Could you not replace the <i> with an <em> and actually convey meaning?

  12. #12
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    @C. Ankerstjerne

    You might be correct but, would 'emphasizing' a title be incorrect?

    Could you not replace the <i> with an <em> and actually convey meaning?
    Only if you are emphasizing the title of the book. You are not emphasizing a book title in bibliographical references.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  13. #13
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    As logic_earth says, it isn't emphasised, only italicised. ISO 690 doesn't mention anything about emphasis.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    My favorite example is book titles in bibliographical references. As per ISO 690, these has to be italicised, so using CSS would not convey the full meaning.
    If it's a reference, then it should be marked up with <cite>, which – coincidentally – is rendered in italics by default.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    CITE refers to the entire bibliographical reference, not just the title. Marked up properly, it would be styled as such:
    Code html4strict:
    <cite>
      LOMINADZE, DG.
      <i>Cyclotron waves in plasma</i>.
      Translated by AN Dellis; edited by SM Hamberger.
      1st ed. Oxford : Pergamon Press, 1981.
      206 p.
      International series in natural philosophy.
      Translation of : Ciklotronnye volny v plazme.
      0-08-021680-3
    </cite>

    This can be extended with my proposed microformat:
    Code html4strict:
    <cite>
      <span class="primary_responsibility">LOMINADZE, DG</span>.
      <i><span class="title">Cyclotron waves in plasma</span></i>.
      <span class="subordinate_responsibility">
        <span class="translator">Translated by AN Dellis</span>;
        <span class="editor">edited by SM Hamberger</span>.
      </span>
      <span class="edition">1st ed.</span>
      <span class="publication">
        <span class="city">Oxford</span> : 
        <span class="publisher">Pergamon Press</span>,
        <span class="year">1981</span>
      </span>.
      <span class="extent">206 p.</span>
      <span class="series">International series in natural philosophy</span>.
      <span class="notes">Translation of : Ciklotronnye volny v plazme</span>.
      <span class="standard_number">
        <span class="isbn">0-08-021680-3</span>
      </span>
    </cite>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  16. #16
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your example, by default would make the entire block of text italic. So the <i> tag is kind of useless, since the whole debate is probably with styles turned off. Otherwise, you would use css to style the entire thing correct?

    Also, this would not validate unless you wrapped a block level element around the cite tag.
    Last edited by cooper.semantics; Oct 6, 2008 at 09:30.

  17. #17
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    That the entire block is italicised by default is an unfortunate consequence of using the proper semantics. The CITE element isn't the only case where this is true. Semantics always comes before presentation, and since it is easily corrected with CSS, I don't consider it a significant concern.

    It is true that the CITE element has to be a descendant of a block-level element, but I didn't want to include this in the example, to avoid cluttering it. Usually, I would place each CITE within an LI of an OL or UL, depending on the type of reference used.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  18. #18
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Autistic Cuckoo wrote:
    Hierarchy? How so? They denote semantic emphasis, that's all.
    Contrast leads to hierarchy and emphasis is a form of contrast.

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Contrast leads to hierarchy and emphasis is a form of contrast.


    How does contrast lead to hierarchy?
    Birnam wood is come to Dunsinane

  20. #20
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    A hierarchy (in Greek: Ἱεραρχία, derived from ἱερός — hieros, 'sacred', and ἄρχω — arkho, 'rule') is a system of ranking and organizing things or people, where each element of the system (except for the top element) is a subordinate to a single other element.
    emphasis does not create a hierarchy what it does is gives more weight to a word or parse.
    Headers and list create a hierarchy.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  21. #21
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    incorrect

    Contrast is to be different. A h1 only creates a hierarchy because it is different not because it is a h1. Than again I guess I'm speaking visually so never mind.

  22. #22
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    You are almost funny when you make up these wild conclusions.
    I'm guessing you never wrote an outline for an article?
    Or taken a class on English?

    Giving something emphasis gives it more weight, we do it all the time when we speak.
    For example telling jokes, we give the punch line more emphasis.

    It does not define a hierarchy, if it did it would be included in an outline.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  23. #23
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Than again I guess I'm speaking visually so never mind.
    An HTML document has a structural hierarchy and a logical hierarchy. HTML has nothing to do with visuals, with the exception of some presentational element types (most of which are deprecated).

    The structural hierarchy is made up from the nesting of elements. The root is the html element which has two children: head and body. These, in turn, have other children nested in a hierarchical structure.

    The logical hierarchy is made up from headings, corresponding to the 'outline' that logic_earth speaks of. It describes the logical disposition of the content. And it's the heading levels that make up this logical hierarchy; not their appearance, which is undefined by HTML anyway.

    I'm afraid I still fail to see the 'visual' hierarchy and how emphasis would affect it.
    Birnam wood is come to Dunsinane

  24. #24
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Like I said – logical hierarchy yes – visual hierarchy no.

    Contrast is just to be different.

    A heading with a larger point size than the surrounding text is typographic contrast. This typographic contrast visually communicates to the viewer that the larger item is more dominate than the surrounding text. That's just a simple example, but it all comes down to contrast in line,color,shape,texture or value. If the majority of elements on a page are similar and there is one contrasting item visually the eye will go there first. The eye tends to follow a path from more to less greater areas of contrast.

    Giving something emphasis gives it more weight, we do it all the time when we speak.
    For example telling jokes, we give the punch line more emphasis.
    EXACTLY, so through contrast you can visually communicate emphasis.

    When people emphasis something when they speak their voice changes which is contrast. The listener than identifies it as more important because of that break from the normal speech pattern.

    Again… I'm not arguing logical hierarchy, but visual.

    I'm sure if you read this post before reading it your eyes went to the bold areas. This is because they contrast everything else in visual weight. If they did not have a contrasting visual weight your eyes wouldn't have immediately identified them as areas of emphasis.

  25. #25
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    A heading with a larger point size than the surrounding text is typographic contrast.
    But this has nothing whatsoever to do with HTML. HTML doesn't define the point size for headings. That's a job for CSS.

    HTML defines the logical hierarchy based on heading levels.

    Quote Originally Posted by oddz View Post
    I'm sure if you read this post before reading it your eyes went to the bold areas.
    Actually, no. I'm a very linear reader.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •