HTML Tags To Use Instead Of Div
HTML is a commonly used language for creating web pages and applications. Although it is widely used, many of us may not be aware of some elements and tags that HTML offers, so we end up using the div tag. HTML has many semantic tags with varying use cases and which improve the accessibility of our websites and application. In this article, we’ll discuss some of the HTML tags that you may not be familiar with and that can be used instead of divs. Let’s dive in.
Article: This tag can be used to specify a group of related content that is independent of the other page content. If the content makes sense as a standalone piece, then the article tag is best used for it. The article tag is mainly used for displaying content like blog posts, stories or articles. It can be used instead of the div tag to create more semantic meaning to your codebase. The article tag does not come with specific or different styles on the browser. You can use CSS to style it to your taste.
Aside: This tag can be used when the content provides related information and works with the page’s content but is not part of the actual flow in the main body of the page. The Aside tag is used for content that needs to be placed separately from the page’s main content. It may be used to wrap elements such as nav elements, advertisement banners, related links etc.
Nav: As the name suggests, this tag is used to place content related to a page’s navigation. The nav tag is used for navigation menus with links that lead to different parts of a page or website. A common way to use it is as a wrapper for an ordered or unordered list that contains the page’s navigation links. Using the nav tag creates a clear semantic meaning for screen readers and other accessibility tools.
Main: This tag is used to show the main content of a document. The main HTML tag wraps content that represents the main area of a document. When using the main tag, ensure that its content is only things needed in a particular page and not replicated across all pages. Things like the header, footer, and navigation elements should not be put in the main tag. The main should also appear only once in a document. This tag helps screen readers to rapidly know the important parts of a document while skipping the code at the top.
Header: For semantic purposes, rather than using a div, a header tag will be more appropriate to use in the top introductory section of a web page or document. This tag is used to represent the introductory content of a document. It is mainly used to wrap content such as a logo, search bar, menu or navigation items, and many others.
Footer: The footer element is used to create a footer for a section or the document as a whole. It acts as a container for supporting items in a page or closing items. Page content such as an author’s information, contact information, related links, and copyright information can be placed in a footer tag. The footer tag is typically placed at the bottom part of a document. When this tag is used, screen readers can easily identify information as opposed to when a div tag is used.
New HTML tags are added periodically, some replacing others, or entirely new ones. Keeping up with these changes will help us stay up to date with the ever-changing world of tech as well as create websites and applications that can be seamlessly accessed by everybody. Remember that these rules are not set in stone. It is not forbidden to use the div tag, however, some more tags have been created with specific use cases and more overall advantages. We can still use the div tag in our projects for places where the other tags may not fit in.
