Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Emphasizing content in paragraphs

From: Improving SEO Using Accessibility Techniques

Video: Emphasizing content in paragraphs

In print publishing, we use bold and italicized fonts to emphasize text content in different ways. On the web, you can add tags to text content to achieve the same effect, but the weight on the web is put on what action you are performing rather than the stylistic approach you are using when doing so. In other words, whereas in print, you talk about italicized or bold text, on the web, you talk about emphasized and strongly emphasized text. Whether these are actually italicized or bold is a decision for the designer. The general principle of emphasizing text is pretty recursive.

Emphasizing content in paragraphs

In print publishing, we use bold and italicized fonts to emphasize text content in different ways. On the web, you can add tags to text content to achieve the same effect, but the weight on the web is put on what action you are performing rather than the stylistic approach you are using when doing so. In other words, whereas in print, you talk about italicized or bold text, on the web, you talk about emphasized and strongly emphasized text. Whether these are actually italicized or bold is a decision for the designer. The general principle of emphasizing text is pretty recursive.

Emphasizing text is done to emphasize text. What's important here is the word emphasize. You're not adding stylistic elements to the text; you are actually emphasizing it. And that's what we want to do. The emphasis is something that happens internally in the reader, not something that it happens on the page itself. The accessibility benefit of emphasizing your text properly is two-fold. First of all you are telling the browser that this is emphasized text and allowing it to emphasize it in whatever way the style sheet or the browser itself wants.

Secondly, if you're using a text-to- speech browser, the text-to-speech browser will actually emphasize the text so that if it's emphasized it will be emphasized, if it's strongly emphasized it will be strongly emphasized. This makes it easier for the person who is listening to your text to understand it. At present, there is no real SEO benefit to emphasizing text. However, the people who are building search engines are trying to make them more semantic. They are moving towards what is called the semantic web or the meaningful web. And once that kicks in, search engines will literally understand what it is you're seeing on your page, which means if you put emphasis on something, search engines will put emphasis on that too.

Let's add emphasis to some of the text content in our example project. I will open the example project in my browser so I can find some text I want to emphasize. The easiest way of doing this is usually just by reading the text out, and you will hear when you read it out loud that something has more emphasis. On the last line in the fourth paragraph for instance, there is a natural emphasis. If I read it, The Primrose blossoms have a scent, not strong, but very sweet and pleasant, I can tell there should be emphasis on not strong. Now that I know that, I can go in and change the markup.

So I will open index.html in my Notepad, scroll down to the fourth paragraph and find that piece of text. Here it is: The Primrose blossoms have a scent, not strong, but very sweet and pleasant. So now I can add emphasis to not strong. So I will go in and add a new tag, it's just for emphasis, and then I end the tag where I want the emphasis to end, and I save it. When I now reload the page, you'll see that nothing happened. It's still the same, and that's fine. I will show you why in a second, but first I also want to strongly emphasize a piece of text.

If I scroll further down, there is a piece of text here in the last paragraph here--that trees also have flowers-- that I want to strongly emphasize. So I will go back to my text editor, scroll down to the last paragraph, find that piece of text, starts here, and then say . The strongly emphasize tag is literally strong. I will save that and we will go back to the browser, reload it, and you will see again nothing happened. That's because so far, we who designed the page have not made a decision on how we are going to display emphasized and strongly emphasize text.

So right now it's being displayed just like all the other text. But, if I turn Styles off, you will see that the browser will make that decision on our behalf if we don't specify anything. So under Heading 2, you see here that our emphasized text is now italicized. And our strongly emphasized text at the bottom is bold. If we want this same effect to happen when we turn Styles on, we have to go into our style sheet and add two new styles. So I will open my style sheet, and I will scroll down to the Global styles, then here I'll add two new styles.

I will add a style for the emphasized text and a style for the strong text. I want the emphasized text to be italicized, so I will say font-style: italic and I want the strong text to be bold, so I will say font-weight: bold. When I save that and reload my page in the browser, you will see my strongly emphasized is now bold and my just emphasized text is italicized. And now you see what I was talking about earlier.

The emphasis has nothing to do with how it's displayed. The display is the decision of the designer. For example, if I want my strongly emphasized text to be red, I can go into my style sheet and just add that. I will say color: red, save it, reload, and the strongly emphasized text is now red. It doesn't matter to the browser; it's still just strongly emphasized text. But to the person who is just looking at it, you can see that it's red. There is an important side note to this. In addition to the tag, emphasized, and the tag, which is strongly emphasized, you can also add a B tag or an I tag. They either bold or italicize the text.

Now these two tags are purely visual. They are only added if you want to make some text either italicized or bold, without adding more emphasis to them. That means they'll look bold or italicized in the browser, but if they are read back to someone, they won't have emphasis. So every time you want to emphasize something you use either the tag or the tag. Using strong and em tags in your text takes you back to the original purpose of bold and italicized text, lending importance to sections of the text. It also hooks into the default settings of all browsers, who will identify the text as emphasized or strongly emphasized and point this out to the reader, either through visual changes or through voice changes.

Show transcript

This video is part of

Image for Improving SEO Using Accessibility Techniques
Improving SEO Using Accessibility Techniques

30 video lessons · 11219 viewers

Morten Rand-Hendriksen
Author

 
Expand all | Collapse all
  1. 3m 3s
    1. Welcome
      1m 4s
    2. Using the exercise files
      1m 59s
  2. 8m 16s
    1. Accessibility and SEO: A primer
      4m 58s
    2. Understanding the benefits of accessibility and SEO
      3m 18s
  3. 11m 26s
    1. Experiencing an inaccessible web site
      6m 4s
    2. Experiencing an accessible web site
      5m 22s
  4. 16m 28s
    1. Evaluating screen readers for Windows and Mac
      5m 56s
    2. Installing browser development tools
      4m 8s
    3. Pretending to be a screen reader
      6m 24s
  5. 7m 40s
    1. Installing SEO tools
      2m 30s
    2. Understanding how search engines search a page
      2m 45s
    3. Comparing sites that are SEO-friendly with ones that are SEO-unfriendly
      2m 25s
  6. 44m 6s
    1. Defining a language for a page
      5m 4s
    2. Defining meta headers for a page
      6m 10s
    3. Creating better semantic markup with HTML5
      3m 13s
    4. Using and hiding section headings
      4m 56s
    5. Creating content hierarchies with heading tags
      5m 29s
    6. Emphasizing content in paragraphs
      5m 36s
    7. Making accessible block quotes
      3m 22s
    8. Using some new HTML5 tags
      4m 47s
    9. Using ordered and unordered lists
      5m 29s
  7. 22m 17s
    1. Marking up links properly
      6m 48s
    2. Marking up images
      7m 23s
    3. Creating a proper image header with CSS
      8m 6s
  8. 32m 43s
    1. Creating an accessible menu with an unordered list
      6m 16s
    2. Creating and hiding nav headings and skip navigation links
      6m 59s
    3. Giving navigation links proper focus with style
      4m 39s
    4. Creating an accessible drop-down menu
      10m 46s
    5. Scrapping drop-down menus for better options
      4m 3s
  9. 3m 44s
    1. Next steps
      3m 44s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Improving SEO Using Accessibility Techniques.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
  • Mark video as unwatched
  • Mark ALL videos as unwatched
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.