Overview
Though many elements are designed to add structure to a web page, others are designed to add information. These informational elements are referred to as semantic elements. In this lesson we will learn about the semantic elements available in HTML and how they can be used.
strong
The <strong> element indicates important text. Browsers display in bold.
<p>Create <strong>strong</strong> text</p>
Create strong text
em
The <em> element indicates emphasis should be placed on the text.
<p>Add <em>emphasis</em> to text</p>
Add emphasis to text
abbr
The <abbr> element is used for both abbreviations and acronyms.
<p><abbr title="Doctor">Dr.</abbr> Seuss is one of my favorite authors.</p> <p>The <abbr title="International Space Station">ISS</abbr> is traveling at approximately 17,000 <abbr title="miles per hour">mph</abbr>.</p>
Dr. Seuss is one of my favorite authors.
The ISS is traveling at approximately 17,000 mph.
cite
The <cite> element is used when referencing a piece of work, such as a book, film or research paper.
<p>Have you read <cite>Green Eggs and Ham</cite> by Dr. Seuss?</p>
Have you read Green Eggs and Ham by Dr. Seuss?
dfn
The <dfn> element is used when defining a term for the first time. It typically renders in italic.
<p>A <dfn>web server</dfn> is a special computer that is constantly connected to the internet and is optimized to send web pages.</p>
A web server is a special computer that is constantly connected to the internet and is optimized to send web pages.
address
The <address> tags are placed around contact details for the author of a page or article. This could be a physical address or just a phone number or email.
<address>
<p>
<a href="mailto:test@example.com">test@example.com</a><br>
123 Example Way<br>
Somecity, CA
</p>
</address>
test@example.com
123 Example Way
Somecity, CA
ins
The <ins> element indicates content that has been inserted into the document.
<p>This is an <ins>extremely</ins> important concept.</p>
This is an extremely important concept.
del
The <del> element indicates deleted text.
<p>This is an <del>extremely</del> important concept.</p>
This is an extremely important concept.
s
The <s> element is used when something is no longer relevant or accurate, but should not be deleted.
<p>Cost: <s>$25</s> $20</p>
Cost: $25 $20
blockquote
The <blockquote> element is used for longer quotes that should be it’s own paragraph. p tags are placed inside of the blockquote tags. Browsers will typically indent blockquotes.
<blockquote cite="https://www.brainyquote.com/quotes/martin_luther_390009"> <p>I have held many things in my hands, and I have lost them all; but whatever I have placed in God's hands, that I still possess.</p> </blockquote>
I have held many things in my hands, and I have lost them all; but whatever I have placed in God’s hands, that I still possess.
q
The <q> element is used for a short quote that is placed within a paragraph.
<p>Martin Luther once said, <q cite="https://www.brainyquote.com/quotes/martin_luther_140721">God writes the Gospel not in the Bible alone, but also on trees, and in the flowers and clouds and stars.</q></p>
Martin Luther once said,
God writes the Gospel not in the Bible alone, but also on trees, and in the flowers and clouds and stars.
Summary
Though the visual outcome of these tags is often similar to other tags, that is not the point. Semantic elements provide information or meaning that can be used by a browser or a screen reader to make the content more understandable and accessible to all users.