LEARN HTML Elements with Examples

HTML (Hypertext Markup Language) is the foundation of the World Wide Web. It provides the structure for web pages and allows us to create content that is both structured and interactive. In this article, we will dive into some common HTML elements, along with examples of how they are used.

1. Heading Elements (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

Heading elements are used to define headings or titles within a web page. They are ranked from <h1> (highest) to <h6> (lowest). Here’s how you might use them:

<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

Headings not only provide visual hierarchy but also affect the SEO (Search Engine Optimization) of your page. Search engines use them to understand the structure and importance of your content.

2. Paragraph (<p>)

The paragraph element is used to define text paragraphs. It’s one of the most common elements in HTML:

<p>This is a simple paragraph of text. It can contain <a href="#">links</a>, <em>emphasis</em>, and more.</p>

3. Anchor (<a>)

The anchor element is used to create hyperlinks to other web pages or resources. Here’s an example:

<a href="https://webeasly.com">Visit webeasly.com</a>

4. List Elements (<ul>, <ol>, <li>)

HTML provides two types of lists: unordered lists (<ul>) and ordered lists (<ol>), with list items (<li;) inside them:

Unordered List:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

5. Image (<img>)

To display images on a web page, you can use the <img> element:

<img src="image.jpg" alt="A beautiful image">

The src attribute specifies the image file’s location, and the alt attribute provides alternative text for screen readers and browsers that cannot display the image.

6. Div (<div>)

The <div> element is a generic container used to group and style elements together. It doesn’t have any specific visual representation on its own but is crucial for layout and styling:

<div class="container">
  <p>This is a paragraph inside a div.</p>
  <a href="#">A link inside a div</a>
</div>

7. Form Elements (<form>, <input>, <button>)

Forms are used for user input and data submission. The <form> element defines a form, and you can add various input elements like text fields, checkboxes, and buttons within it:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Submit</button>
</form>

result :