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>

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>

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>

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>

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>

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>

6. <iframe> - Inline Frame 🖼️

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

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

7. Heading Tags 📚

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

<h1>Main Heading</h1>
<h2>Subheading</h2>

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>

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>