Replacing div tag with schematic tags
When we are starting to write HTML it is common that we use the div tag a lot more often. Containers, sections, footers, sidebars, headers, etc… are all wrapped up into a div. While there is nothing functionally wrong with this, it does not add any schematic meaning. You can replace the div tag with schematic tags to add meaning to your content.
Schematic tags are not required, browsers will render your page all the same. The use of these tags helps you to organise your page and helps search engines to better understand the content.
Both the div and span tags have no special meaning. According to W3C div is,
The div element has no special meaning at all.Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
The same goes for span tag as well
The HTML < span > element is a generic inline container for phrasing content, which does not inherently represent anything.
Okay if I should not use div at all places what should I use then?
Here is the list of that can be used in place of the div tag that adds schematic meaning to the HTML.
- Main - The main element is used to indicate the, you guessed it main content or dominant content of the body. A webpage can have only one main content.
For example, in a product page in an e-commerce site, the main content would be the product details and images. Other content such as Related items, Cart, etc.. will not be inside the main.
Article - This tag can be used in news websites, blogs, etc…
Section - A content can be placed into a section tag if it contains a heading and a corresponding content. For example, it can be used to mark various sections of an article.
Summary & Details - These tags can be used with additional information that is displayed upon clicks. The summary element will contain the short content/title. The details tag will contain both the summary tag and the detailed information.
Nav - Almost every website now has navigation. It has become an essential part of any large website. It can either be a header, side navigation or a sitemap at the bottom. They can be placed within the nav tag.
Header & Footer - The header can be used to contain any headings, logos, etc… A footer tag can be used to enclose information such as copyright notices at the bottom of the page, etc…
Aside - The aside tag is used to indicate the portion of a webpage that is indirectly related to the main content. For example, a factoid in a webpage related to the article but not a part of the article.
Figure & Figcaption - A figure tag can be used to enclose a diagram, chart, image, etc… in a document that can be moved to any part of the document without affecting the flow.