DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

Day 58: Commonly Used HTML Tags

#webdev #html #javascript #100daysofcode

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)