Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course focuses on two elements of web development: accessibility and search engine optimization (SEO), demonstrating why they are important and how they work. Author Morten Rand-Hendriksen also shows how good coding practices and modern web standards can make a site accessible and more visible to search engines and social networks.
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.
There are currently no FAQs about Improving SEO Using Accessibility Techniques.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.