Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson we are going to talk about Phrase markup elements, which mark up your text with the intention of a phrase, like for example, here we have an emphasized phrase, which just means it should be emphasized with the em or this one means it should be read strongly. This makes it possible for non-visual browsers to know what to do with your text. To read it stronger or to read it with emphasis, as opposed to the font markup elements, which tells the browser, this one is italic and this one is bold, but it doesn't really tell a non- visual browser what to do with it.
So it's important to understand the distinction, the Phrase markup elements are covered in this lesson and the Font markup elements are covered in our next lesson. The first Phrase markup element we are going to talk about is the Emphasize element and all of these Phrase markup elements, as well as, their Font markup counterparts are inline-level elements, which means that they go inline with the text rather than in blocks as the block-elements. So, this is an inline-element and it means to emphasize em and you will notice that in the browser it's rendered with italics.
You can't count on that though. Different browsers may render it differently. If you really care, if it's italics or not, you are encouraged to use the Font markup elements instead. The Strong element means to read it strongly and in this case it is rendered in bold in the browser. The Q element is for quotes and you will notice in the browser it is rendered with special curly quotes. An important note about the Q element. It is not supported by all browsers. So, be sure that you check it in the browsers that matter to you, before committing it to the Internet.
The Code element renders in monospace text and the next few elements are interesting. The Abbreviation element allows you to use an abbreviation, and hover your mouse for the meaning of abbreviation. So, here we have an m and you will notice that in Firefox it puts this little dotted line under it to say you hover your mouse over here, and you hover your mouse and you get the definition of the abbreviation. These work differently in different browsers. So, be sure to test them in different browsers that matter to you.
Likewise, the Acronym element, we have LOM here. And we'll notice that in the title attribute we have lots of meaning, which is the definition of the acronym. So, down here you hover your mouse over it and LOM stands for Lots of Meaning. The next element is DFN, which stands for defining instance. So, you would use this the first time you use a term that you want to define in a document. In this case, the Firefox browser renders it as italic and if you hover your mouse over it again, you get the title tag.
So, meaning and purpose there. DFN with the title tag and it's meaning and purpose. Again, this is for using a term the first time in a document and being able to define it. The Keyboard element, kbd renders as monospace in Firefox. The Sample element likewise. samp also renders as monospace and then finally the Var element, var, which stands for variables, this is where you would use a variable in code or something like that and that renders as italics.
So, these are the Phrase markup elements and how they are rendered in the Firefox browser. Of course, different browsers will render them in different way. So, be sure to test them in the browsers that matter to you before committing your page to the Internet.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101001 Viewers
61 Video lessons · 87790 Viewers
71 Video lessons · 71666 Viewers
56 Video lessons · 103555 Viewers
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.
Your file was successfully uploaded.