Ditch the div Tag: Use These HTML Tags Instead
Tags: html, webdev, beginners, programming
Published: 2023-01-01 17:29:22

**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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
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.

```html
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.

```html
<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.