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 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.

More From Medium

More from NotOnlyCSS

More from NotOnlyCSS

Turn Your Website into a PWA

More from NotOnlyCSS

More from NotOnlyCSS

How to Remove Unused CSS

More from NotOnlyCSS

More from NotOnlyCSS

11 Vue.js Lifecycle Hooks

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade