Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by robert chisholm
robert chisholm
Courses Plus Student 4,152 Points

TML mastery challenge in interactive web design

Hi all

I am completing stage 4/8 in mastery but im stuck. I know that a <p> tag cannot contain a ol as its only used for inline commands like <span> etc.

But im stuck on this one where it states place <p> tag with text inside of it bold.

this is to do with a div with a <code><h2></code> inside then the <code><ol></code> and <code><li></code>

here is what i have put down but HTML validator on <code>W3C</code> states passed but the course states incorrect. Do I have it correct?

<body>

<pre> <h1>HTML Mastery Challenge</h1>

<!-- Write your code below -->

<div>
  <h2>Shopping List</h2>
  <p>this is some text with <b>some bold words</b></p>
  <ol>
  <li></li>
  <li></li>
  <li></li>
  </ol>
</div>

</pre>

3 Answers

James Barnett
James Barnett
39,199 Points

@Robert -

In the brave new world of HTML5, bolding and italicizing has changed.

You can read about these changes over on HTML5 Doctor.

  • <em>: emphasis - something you’d pronounce differently
  • <strong>: stronger emphasis

What this means is that default browser styles render text inside an <em> tag as italicized. Likewise by default text inside a <strong> tag is rendered as bolded.

It's worth nothing that ...

  • <i>: was formerly italic, now - transliterated foreign words & technical terms
  • <b>: formerly bold, now - keywords

In cases besides the ones I mentioned above in reference to the <i> & <b> tags, using a <span> tag with a semantically meaningful class name is often a better choice, as @Rhys alluded to.

Note: The tag descriptions I provide here are parapharsed from the HTML5 doctor blog article.

rayorke
rayorke
27,709 Points
rayorke
rayorke
27,709 Points

With HTML5, you want to avoid using the bold and italic tags, and instead use strong and em tags

Wait a minute, Doc. Ah... Are you telling me that you built a 
<em>time machine</em>... out of a <strong>DeLorean</strong>?

Will still display:

Wait a minute, Doc. Ah... Are you telling me that you built a time machine... out of a DeLorean?

The w3c goes into this in a little bit more detail:

You should always bear in mind that the content of a b element may not always be >bold, and that of an i element may not always be italic. The actual style is dependent >on the CSS style definitions. You should also bear in mind that bold and italic may not >be the preferred style for content in certain languages.

You should not use b and i tags if there is a more descriptive and relevant tag >available. If you do use them, it is usually better to add class attributes that describe >the intended meaning of the markup, so that you can distinguish one use from >another.

w3c questions

Douglas Weisenburg
Douglas Weisenburg
2,261 Points
Douglas Weisenburg
Douglas Weisenburg
2,261 Points

It would appear that the correct answer is < strong >TEXT HERE< /strong > At least it worked for me.

I can't believe that Treehouse didn't answer this one......

Benjamin Koontz
Benjamin Koontz
1,438 Points

I'm having this problem, as well, and even though the text is clearly bold, the challenge is telling me I'm wrong.