Lesson 8

Inline Semantics

0

While paragraphs and lists are meant to identify whole blocks of text, we sometimes want to provide meaning to a word (or a few words) within a text.

Strong

For important words, use the <strong> tag:

Result:

This is important but this is not.

By default, <strong> elements are displayed in bold, but keep in mind that it is only the browser’s default behavior. Don’t use <strong> only to put some text in bold, but rather to give it more importance.

Emphasis

For emphasized words, use the <em> tag:

Result:

This is emphasized but this is not.

By default, <em> elements are displayed in italic, but keep in mind that it is only the browser’s default behavior. Don’t use <em> only to put some text in italic, but rather to give it stress emphasis.

Abbreviations

Abbreviations like W3C or CD can use the <abbr> element:

You can add a title attribute to specify the abbreviation’s description, which will appear by hovering the element:

Result:

I just bought a CD.

Inline quotes

The <blockquote> element is a block-level element. It has an inline version: <q>:

He said “Hello World” and just left.

Other inline elements

There are plenty of other inline semantic elements to choose from, but we’ve covered the most common ones.

HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0

Comments

icon

Be the first to comment!