Adding Extra Information to a Web Page with Semantic HTML Markup

Adding Extra Information to a Web Page with Semantic HTML Markup

The HTML elements we used to create the structure of our first web page not only gave shape to our page, but also told us a lot about the type of content they contained. Heading elements helped us organize sections of our page, and the blockquote element indicated a quotation from an external source. Using the proper HTML elements to reinforce the meaning of content in a web page is known as semantic markup. There are several elements who’s primary purpose is to add extra information to your text. While many of these elements will alter the appearance of your text, that is not their intended use. Semantic HTML elements are meant to assist screen readers and web crawlers in understanding the content on your page. By now you should recognize this as a common theme in HTML. There are only a handful of semantically neutral HTML elements, and it is very rare that you will use HTML elements for presentational changes. Any visual changes will be made later with CSS. CSS is awesome! HTML is… necessary. So lets take a look at some of the more common semantic HTML elements. I’ll be relating these tags to selections from Lewis Carroll’s Jabberwocky.

Learning opportunity alert!

See how Jabberwocky is italicized? This is accomplished with the <cite> element. Use the <cite> element to reference any piece of work such as a movie, book, poem, or article.

Learning opportunity complete! Lets move on.

html strong tag

Text that has strong importance should be contained in a <strong> tag. This could be a word of warning or some critical piece of information. In the second stanza of Jabberwocky, “beware” is the perfect place for the <strong> element. Text contained in the <strong> element will be rendered as bold. Because of this, you will sometimes see the <b> element used in lieu of the <strong> element. The <b> element has no semantic meaning. It’s purely a decorative thing, so it should only be used when no other tag is more appropriate.

This is also the first time the word “Jabberwock” is explained, so we could wrap that in the <dfn> tag. The <dfn> element marks the defining instance of new terminology. You would only ever want to use it once per word being explained.

Another way we can add emphasis to text is with the <em> and <i> elements.

html em tag

We’ll use the <em> element to add intensity to the sound effect “snicker-snack” found in the fifth stanza. For the sake of example, we’ll also emphasize the phrase “One, two! One, two!” with the <i> tag. Both of these tags will display our text in italic. Because they are so similar, it can be a little confusing to know which tag to use. Emphasized text will always go in an <em> tag. The <i> tag is for bits of text that convey an alternate voice or mood. Technical terms, thoughts, and phrases from another language are all examples of text that would be better suited for the <i> tag. As a general rule, use <i> only when no other tag is semantically appropriate.

Whoa! I think something important happened in that stanza, so I took the opportunity to show you the <mark> tag.

html mark tag

The mark tag is used to draw attention to a piece of text by highlighting it. I know what you are thinking, and yes you are right, I did say that you shouldn’t use elements for their visual results. We could have combined the semantically neutral <span> element with CSS to achieve the same effect, but then it wouldn’t mean anything to a computer. We still want screen readers and web crawlers to know that this text is important, so the <mark> tag is more appropriate than the <span> tag.

We’ve covered the main semantic HTML tags you will likely encounter in the wild, but we’ve only scratched the surface. The final element I want to show you today is the <q> tag. This is used for short quotations, like the one found in the sixth stanza of Jabberwocky.

html q tag

The <q> element will automatically insert quotation marks around the text contained inside of it. This is one of several ways that it differs from the <blockquote> element. The major difference being that <blockquote> elements are specifically for text taken from another source, while the <q> element simply defines a short quotation. Structurally, <blockquote> is a block-level element, and <q> is an inline element. We’ll get into the differences between block-level and inline elements later. For now I think we’ve filled our heads with enough ideas for one day.

Adding Extra Information to a Web Page with Semantic HTML Markup was posted by on . JR is one of the three humans that run the behind-the-scene affairs of The Hello World Program. He is interested in spreading the good robot word over the vast Inter-webs. His contributions to the show include editing, web programming, design, and music composition.

Discuss this article in the Comments below, or and it with your friends. Learn more about Web Development by subscribing to The Hello World Newsletter .

Join the Discussion

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid

Want to Learn HTML?

Master the essential web language with our free 10 day course. Get entertaining web development classes emailed directly to your inbox.

The email entered is invalid