9 HTML Tags That Probably You Don’t Use

and you should start using

Luca Spezzano
Dec 3, 2019 · 4 min read

Many times we write HTML code in a superficial way, probably many of us think that HTML is not essential and we don’t need to know it in depth.

All this makes me angry, and you know why?

Because everyone says that HTML is too simple and it’s not even considered as a programming language.
My question is WHY?
If it is so simple, why don’t we start to do some research and we are committed to writing the HTML tags correctly?

START TO USE HTML TAGS IN THE CORRECT WAY!

Why are HTML tags important?

Some of the reasons are the following.

That’s right, and it may sound silly! But having a well-structured HTML code undeniable helps to have a cleaner and more comfortable to maintain code for all developers.

The goal of every website is to drive traffic, and most of the visitors are coming from search engines. One of the best ways to improve our visibility on search engines is to use HTML tags correctly.

How can we read on Wikipedia here

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.

I assume that most people know basic HTML tags, so I’d like to introduce you some tags that you probably don’t use that might be useful.

Wbr (Word Break Opportunity) tag

the <wbr> tag specifies wherein the text would be ok to add a line-break, you should use it when you a word is too long, and you are afraid that the browser will break your lines at the wrong place.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

Time tag

The <time> tag defines a human-readable date/time. It can also be used to encode date and time in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user’s calendar, and search engines can produce smarter search results.

<p>We open at <time>10:00</time> every morning.</p><p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

Blockquote tag

The <blockquote> tag specifies content that is being quoted from an external source (a person, document, newspaper, case study, etc.).

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

Picture tag

The <picture> tag gives web developers more flexibility in specifying image resources.
Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to fill the browser viewport nicely.

The <picture> element has two different tags: one or more <source> tags and one <img> tag.

The <source> tag can have the following attributes:

  • srcset (required): defines the URL of the image to show
  • media: accepts any valid media query that would be typically set in a CSS
  • sizes: defines a single width descriptor, a media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
  • type: defines the MIME type

The browser will use the attribute values to load the most appropriate image.

The <img> tag is used to provide backwards compatibility if the browser doesn’t support the <picture> tag.

Article tag

The <article> tag specifies independent, self-contained content, the most common use case is blog posts.

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

Main tag

The <main> tag specifies the main content of a document.
This can help with keyboard command access, zooming on mobile browsers, and more.
There must be one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,released in 2008.</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>

Nav tag

The <nav> tag defines a set of navigation links.
Not all links on a page go into the nav tag but only the primary navigation blocks.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Footer tag

The <footer> tag defines a footer for a document or section, and it should contain information about its containing element.

This tag typically contains (authorship information, copyright information, contact information, sitemap, back to top, links related documents).

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>

Header tag

The <header> tag represents a container for introductory content or a set of navigational links. Typically it contains: logo, navigation links or heading tags.

<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

If you are interested in learning about new HTML 5 tags I suggest you take a look here.

NotOnlyCSS

This publication includes original articles and tips about…

By NotOnlyCSS

Articles and tips for frontend developers Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store