Theory
Theory
Comments

The strong and b tags, which are used to strengthen or highlight text

The mechanisms for highlighting words and phrases in text are not limited to these tags. You have learned how to italicize phrases, but now let’s figure out how we can bold text.

The <strong> and <b> (which is short for “bold”) tags are intended to highlight words and phrases. By default, both tags display text in the same way: they make text bold.

The <strong> tag indicates that the marked text is important. It can be used to highlight warnings or parts of a document that the user should see before continuing with the rest of the text. In this case, enclosing part of the text with the tag <strong> should not change the meaning of the sentence.

<strong>Please note!</strong> There is a pitfall here. <strong>You may fall into the pit</strong> if you get too close to the edge.

The <b> tag is intended to highlight text in order to attract attention to it, but in a way that does not attribute any other significance to it. You should use it only in cases where other highlighting tags are not appropriate. A typical example is the way in which the introductory sentence of an article is highlighted.

You enter a small room. Your <b>sword</b> becomes brighter. A <b>rat</b> runs swiftly along the wall.

Best of all, the differences between these tags will be noticeable to people who use some types of accessibility tools, including in particular the blind and the visually impaired. When a screen reader reads a website aloud, it will emphasize words that have been tagged with <strong> by changing intonation. This is in contrast to the less emphatic tone of voice that is used to read words enclosed in <b> tags.

The same goes for the tags <em> and <i>. The <em> tag “reader” will change the intonation of the voice that reads the word aloud.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Ten. Summing up</h1> <time datetime="2018-11-28T12:00">12:00</time>  <p>I have completed the first week in my coder course.</p> <p>What I took away is that there is really nothing complicated about web layout. You just need to know what each tag is used for and use them in accordance with their intended function.</p>  <p>All I have left to do is to learn CSS, and that’s it: I will be a cool coder!</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } time { color: #6a2cce; }

Goalscompleted

Let’s enclose the text of the first paragraph in <b> tags.
Enclose the word CSS in the third paragraph using the tag <strong>.

Enclose the phrase to do in the tag that conveys the appropriate meaning.

The strong and b tags, which are used to strengthen or highlight text

Comments

Log in

Sign up

Restore access