DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

Day 58: Commonly Used HTML Tags

1. <div> - The Container πŸ“¦

The <div> tag, short for division, is a versatile container used to group other HTML elements. It has no inherent styling but acts as a building block for structuring web pages.

<div>
  <p>This is inside a div.</p>
  <a href="#">A link in the div</a>
</div>
Enter fullscreen mode Exit fullscreen mode

2. <p> - Paragraph Tag πŸ“

The <p> tag defines paragraphs. It's a block-level element, creating space above and below the enclosed text.

<p>This is a paragraph of text.</p>
Enter fullscreen mode Exit fullscreen mode

3. <span> - Inline Container πŸ”—

The <span> tag is an inline container, often used to apply styles to a specific part of text within a block-level element.

<p>This is <span style="color: blue;">blue</span> text.</p>
Enter fullscreen mode Exit fullscreen mode

4. <a> - Anchor Tag βš“

The <a> tag, or anchor tag, is used for creating hyperlinks. It can link to other web pages, files, or locations within the same page.

<a href="https://www.example.com">Visit Example.com</a>
Enter fullscreen mode Exit fullscreen mode

5. Lists πŸ“‹

Unordered List <ul> πŸ—’οΈ

The <ul> tag creates an unordered list, and <li> defines each list item.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Ordered List <ol> πŸ“

The <ol> tag is for ordered lists, where each item has a number.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

6. <iframe> - Inline Frame πŸ–ΌοΈ

The <iframe> tag embeds another document within the current HTML document.

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
Enter fullscreen mode Exit fullscreen mode

7. Heading Tags πŸ“š

HTML has six heading tags, <h1> to <h6>, indicating different levels of headings.

<h1>Main Heading</h1>
<h2>Subheading</h2>
Enter fullscreen mode Exit fullscreen mode

8. Definition List πŸ“–

The <dl> tag defines a description list, <dt> is for the term, and <dd> is for the description. <datalist> is used in conjunction with input elements to provide autocomplete suggestions.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
Enter fullscreen mode Exit fullscreen mode

9. Line Break and Horizontal Rule 🌐

<br> is used for line breaks, and <hr> creates a horizontal rule.

<p>This is a line<br>break.</p>
<hr>
<p>Content below the horizontal rule.</p>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)