Less Popular But Essential HTML Tags.
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 <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.