HTML (Hyper Text Markup Language) is the primary markup language that we use to layout web content.
For any developer who works within the front-end side of web it is the first language that you need to have at least a basic understanding of before even delving into the styling or scripting/DOM manipulation side.
On this post I am going to shine the spotlight on a couple HTML tags that are rarely used by many web developers that if used will spice up web projects and sometimes ramp up their S.E.O (Search Engine Optimization) performance.
In no specific order down goes the list.
The Document Base URL Element - <base>
The HTML <base> element defines the base URL to be used for all relative URLs in a HTML document. There can be only one base element and if more than one are declared, only the first one will be obeyed and the rest will be ignored.
The element contains the href and target attributes, href holds the default base URL to be used throughout the document while the target attribute just as found on the <a> (anchor) element whose values can be _self, _blank, _parent and _top defines the default browsing context for <a>, <area> or <form> elements without an explicit target attribute.
Example:
<base href="https://www.neglected-tags.com/" target="_blank"></base>
<!-- Declaring only the global browsing context for <a>, <area> and <form> elements -->
<base target="_top"></base>
Note: Open graph tags do not aknowledge the base element thus should always contain full absolute URLs.
The Contact Address element - <address>
The HTML <address> is one of the semantic HTML tags which indicate that the HTML document in focus provides contact information for a person or people or organization.
This can be a business' contact information on the page header or an article's author information inside the <article> element.
The address information can take any form that is appropriate for the context in question including any type of contact data that is needed. The information can be a URL, email address, physical address, phone number, social media handle, geographical coordinates etc.
The most important piece of information that must be included is the name of the person or people or the organization to which the address belongs or points to.
Example:
<address>
Organization Name: The Neglected Tags <br>
Web Site:
<a href="https://www.neglected-tags.com/">www.neglected-tags.com</a><br>
visit us: Abandoned Hills<br>
Ground Floor,
Many Trees
</address>
The Main Element - <main>
The HTML <main> element is a block-level element in the HTML5 specification that helps place focus on the dominant content of the <body> of a HTML document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
It's highly advised that the <main> element's content is unique to the document and to have only one <main> element within a HTML document that's not hidden.
The main element is highly essential as it assists accessibility Landmarks and skip navigation to easily identify and access the main content of the page faster.
The <main> element is also among the elements that are targeted by browser reader modes when converting content into speacialized reader views.
Example:
<html>
<head>
<title>The Neglected</title>
</head>
<body>
<main>
<h1>The Neglected HTML Tags</h1>
<p>
We are actually a group of highly usefull HTML tags.
</p>
<article>
<h2>Main</h2>
<p>... </p>
</article>
<article>
<h2>Address</h2>
<p>... </p>
</article>
</main>
</body>
</html>
The Description List element - <dl>
The html <dl> element defines a description list, enclosing a group of terms <dt> and their respective descriptions <dd>.
Example:
<html>
<head>
<title>List of negected HTML tags</title>
</head>
<body>
<dl>
<dt>Base</dt>
<dd>The base url to be used for all relative URLs in a HTML document.</dd>
<dt>Address </dt>
<dd>Indicates the contact information of a person or people or organization.</dd>
<dt>Main</dt>
<dd>A block-level element that indicate the dominant content of the body of a HTML document</dd>
</dl>
</body>
</html>
The Details disclosure element - <details>
The HTML <details> element creates a disclosure widget whose information renders visible when the widget is toggled into an open state. A <summary> should be declared inside the details element which will provide a descriptive label for the disclouse before it's contents are revealed when toggled open, otherwise the text "Details" will be displayed when <summary is not set which is uninformative.
When the open attribute is set the contents of the disclosure are shown on page render, otherwise the contents are hidden until a toggle event is dispatched on it.
Example:
<details>
<summary>Main</summary>
This is the time that I the main element choose to vent my anger.
</details>
<!-- open state -->
<details open>
<summary>Address</summary>
Hey main, where should I address your anger to.
</details>
Note: Internet Explorer has no support for this element.
The Dialog element - <dialog>
The HTML <dialog> element is used to create a dialog box or other interactive component such as a dismissable alert, popup window or modal window that is rendered within the active browser window.
The element has an open attribute that when set the dialog should be shown to the user, otherwise it should remain hidden.
Example:
<dialog>
<h2> Wrath of the neglected tags!!! </h2>
<button id="close-dialog">Close Dialog</button>
</dialog>
<button id="show-dialog">Click Here!</button>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#show-dialog').onclick = () => { dialog.show(); };
document.querySelector('#close-dialog').onclick = () => { dialog.close(); }; </script>
Note: The tabindex attribute must not be used on the <dialog> element.
Since I can't place all of these html elements on this post, the rest are added below as honorable mentions.
Honorable mentions:
If you think I've left out some HTML elements from this post feel free to mention them, I might just add them. And, if you love the content much so that you would like to support the creation process ๐, it will be highly appreciated.
Go ahead and markup the web.
Top comments (13)
Note that you'll currently need to use a polyfill to use the element. It is so far only out-of-the-box enabled in Chrome. Firefox needs a setting turned on, and Safari doesn't support it.
Which element?
Whoops, seems like Dev.to's comment formatting swallowed it. I meant
<dialog>.Oh! Thanks, good to know.
Yesterday I learnt about the datalist. Html native select search/autocomplete. developer.mozilla.org/en-US/docs/W...
Yeah only issue with that can be that users can also write in their own text so it's not a true autocomplete without a sprinkling of js on top.
I know what you mean though. We recently discovered this one after weeks of work on a custom autocomplete that was basically just this element! Talk about reinventing the wheel
Yes indeed, you're right, Grace!
Wow! I never knew most of these existed! Great article. (:3 ใโ )
Neither did I at some point ๐คท๐ปโโ๏ธ, glad I brought them into your attention๐ต๐ผโโ๏ธ.
I always forget about dialogue. The rest I use all the time ๐
Bdi was a very recent discovery for me
I'm not sure main is a "less popular" element tbh though. That's pretty standard, like header and footer
Surprising as it is it's not used as much as it should be or we assume it is, especially compared to the header and footer elements. I tried checking a number of random websites including top sites such as Google (results page), Twitter, Instagram๐ค, Medium, Geeksforgeeks etc and could not find it in their source code, though some e.g Google use the ARIA role="main" in its place (I guess partly in consideration of IE 11 users).
It is a limited set of data that I've based this on for my lack of knowledge of a better way to collect such stats, but it got me thinking that it just might not be as popular/used as I think it is.
Although some of the outputs are predictable, would have loved some sort of output gif/codepen element in the post :)