Ditch the div Tag: Use These HTML Tags Instead

Div tags are a type of HTML element that can be used to divide a webpage into sections and can be styled with CSS. While div tags can be useful for creating page layouts and separating content, they should not be used excessively or unnecessarily. It is generally best to use the most appropriate HTML element for the content you are trying to mark up, rather than relying on div tags all the time.

So here, In this article, I've picked a few alternatives that can replace div tags easily. They are:

section

This tag defines a section in a document, such as a chapter or an appendix. It is typically used to group content that is related semantically.

<section>
  <h1>This is a section</h1>
  <p>This is a paragraph within the section</p>
</section>

article

This tag defines an independent, self-contained piece of content, such as a blog post or a news article.

<article>
  <h1>This is an article</h1>
  <p>This is a paragraph within the article</p>
</article>

header

This tag defines the header of a section or page. It can contain a logo, a navigation menu, or other elements that appear at the top of the page.

<header>
  <h1>This is the page title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

footer

This tag defines the footer of a section or page. It can contain copyright information, a sitemap, or other elements that appear at the bottom of the page.

<footer>
  <p>Copyright 2021 My Company</p>
  <ul>
    <li><a href="#">Terms of Service</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</footer>

aside

This tag defines content that is tangentially related to the main content of the page. It is often used to display a sidebar or a related content section.

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>

nav

This tag defines a section of the page that contains navigation links.

<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

main

This tag defines the main content of the page. It should be used only once per page, and it should contain the content that is directly related to the purpose of the page.

<main>
  <h1>Welcome to my website</h1>
  <p>This is the main content of the page.</p>
</main>

figure

This tag defines self-contained content, such as an image, a diagram, or a code snippet. It is often used in conjunction with the figcaption tag, which defines a caption for the content.

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>This is a caption for the image</figcaption>
</figure>

details

This tag defines a summary or a description of a section of content. It can be expanded or collapsed by the user, and it is often used to display additional information or options.

<details>
  <summary>Click here to view more details</summary>
  <p>Additional details go here</p>
</details>

fieldset

This tag defines a group of related form elements, such as checkboxes or radio buttons. It is often used to group form controls that belong to the same logical entity.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
  </fieldset>
</form>

address

This tag defines the contact information for the author of a section or the entire page. It is often used to display the author's name, email address, and physical address.

<address>
  Contact me at:<br>
  John Doe<br>
  johndoe@example.com
</address>

form

This tag defines a form that users can fill out. It can contain various form elements, such as text inputs, checkboxes, and buttons.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

table

This tag defines a table of data. It can contain rows, columns, and cells, and it can be used to display tabular data in a structured way.

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>johndoe@example.com</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>janedoe@example.com</td>
  </tr>
</table>

pre

This tag defines preformatted text. It preserves whitespace and font formatting, and it is often used to display code snippets or other formatted text.

<pre>
  This is some preformatted text.
  It preserves both spaces and line breaks.
</pre>

code

This tag defines a piece of computer code. It is often used in conjunction with the pre tag to display code snippets.

<p>To create a new file in the terminal, use the following command:</p>
<code>touch new_file.txt</code>

blockquote

This tag defines a long quotation that is set off from the main text. It is often used to quote other sources or to present long passages of text in a more distinctive way.

<blockquote>
  "The world is a book, and those who do not travel read only a page." - Saint Augustine
</blockquote>

mark

This tag defines text that is highlighted for reference purposes. It is often used to mark passages of text that are relevant to the current context or that need to be reviewed later.

<p>I love to eat <mark>fruits</mark> and vegetables every day.</p>

time

This tag defines a date or a time. It can be used to mark the publication date of a document, or to indicate the start or end time of an event.

<p>I was born on <time datetime="1785-12-30">December 30, 1985</time>.</p>

abbr

This tag defines an abbreviation or an acronym. It can be used to provide a full explanation for the abbreviation in the title attribute.

<p>The <abbr title="United Nations">UN</abbr> was founded in 1945.</p>

bdo

This tag defines the directionality of text. It can be used to change the direction of text in languages that are written from right to left, such as Arabic or Hebrew.

<p>This text is written left to right. <bdo dir="rtl">This text is written right to left.</bdo></p>

colgroup

This tag defines a group of columns in a table. It can be used to apply styles or attributes to a group of columns rather than to each column individually.

<table>
  <colgroup>
    <col span="2" style="width:50%">
    <col style="width:50%">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

del

This tag defines deleted text. It is often used to mark text that has been removed from a document and to show the reason for the deletion. It is often used in conjunction with the ins element to mark additions and deletions to a document.

<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>

dl

This tag defines a definition list. It can be used to create a list of terms and their definitions, or to group related items in a list.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>

ins

This tag defines inserted text. It is often used to mark text that has been added to a document and to show the reason for the insertion.

<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>

kbd

This tag defines keyboard input. It is often used to mark text that should be entered by the user using the keyboard.

<p>To save the document, press <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

output

This tag element in HTML represents the result of a calculation or user action. It is often used in conjunction with form elements, such as input and select, to display the result of a calculation or user action.

<form>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1" name="num1"><br>
  <label for="num2">Number 2:</label>
  <input type="number" id="num2" name="num2"><br>
  <label for="result">Result:</label>
  <output id="result" name="result"></output><br>
  <input type="button" value="Calculate" onclick="calculate()">
</form>

<script>
  function calculate() {
    const num1 = document.getElementById("num1").value;
    const num2 = document.getElementById("num2").value;
    const result = document.getElementById("result");
    result.value = parseInt(num1) + parseInt(num2);
  }
</script>

sub

This tag defines a subscript. It is often used to display a subscripted character or a formula in a smaller font size.

H<sub>2</sub>O

sup

This tag defines a superscript. It is often used to display a superscripted character or a formula in a smaller font size.

E = mc<sup>2</sup>

small

This tag defines small text. It is often used to display fine print or legal disclaimer text in a smaller font size.

<p>Welcome to our website! <small>By using this website, you agree to our terms of service.</small></p>

Conclusion

I hope these tags help. Let me know in the comment section if you have any questions or if I need to add other tags. Thanks for reading.