Common HTML Elements

Master the most commonly used HTML elements: learn how to create paragraphs, headings, links, images, lists, and other essential elements that form the building blocks of every web page.

Table of Contents

• 1. Introduction
• 2. Paragraphs
• 3. Headings
• 4. Links
• 5. Images
• 6. Lists
• 7. Line Breaks and Horizontal Rules
• 8. Conclusion

1. Introduction

HTML provides a wide variety of elements to structure and display content on web pages. Understanding the most common HTML elements is essential for building functional and well-structured websites. These elements include text formatting, headings, links, images, and lists.

2. Paragraphs

The <p> element is used to define paragraphs of text. Browsers automatically add spacing before and after paragraphs:

<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>

2.1. Paragraph Best Practices

Use paragraphs to separate blocks of text logically. Each paragraph should contain related content, and you should avoid using empty paragraphs for spacing (use CSS instead).

3. Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

3.1. Heading Hierarchy

Headings should follow a logical hierarchy. Use <h1> for the main page title (typically only one per page), <h2> for major sections, and so on. Don't skip heading levels (e.g., don't use <h3> after <h1> without an <h2>).

3.2. SEO and Accessibility

Proper heading structure is important for SEO and accessibility. Screen readers use headings to navigate content, and search engines use them to understand page structure.

4. Links

The <a> (anchor) element creates hyperlinks to other pages, files, or sections within the same page:

<a href="https://example.com">Visit Example</a>
<a href="page.html">Go to Page</a>
<a href="#section-id">Jump to Section</a>

4.1. Link Attributes

• href: Specifies the URL or target of the link
• target: Opens link in new window/tab (target="_blank")
• title: Provides additional information about the link
• rel: Specifies the relationship between documents

4.2. Internal vs External Links

Internal links point to pages within your website (relative URLs), while external links point to other websites (absolute URLs). Use rel="noopener noreferrer" with target="_blank" for security.

5. Images

The <img> element displays images on a webpage. It's a self-closing tag that requires the src and alt attributes:

<img src="image.jpg" alt="Description of image">
<img src="photo.png" alt="Photo description" width="300" height="200">

5.1. Image Attributes

• src: Specifies the image file path (required)
• alt: Provides alternative text for accessibility (required)
• width/height: Sets image dimensions (use CSS for responsive design)
• title: Provides additional information about the image

5.2. Alt Text Importance

The alt attribute is crucial for accessibility. It describes the image for screen readers and displays when the image fails to load. Always provide meaningful alt text.

6. Lists

HTML provides three types of lists: ordered lists, unordered lists, and definition lists.

6.1. Unordered Lists

Unordered lists use bullet points and are created with <ul> and <li> elements:

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

6.2. Ordered Lists

Ordered lists use numbers and are created with <ol> and <li> elements:

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

6.3. Nested Lists

Lists can be nested inside other lists to create hierarchical structures:

<ul>
  <li>Main item
    <ul>
      <li>Sub-item</li>
      <li>Another sub-item</li>
    </ul>
  </li>
</ul>

7. Line Breaks and Horizontal Rules

HTML provides elements for controlling line breaks and visual separators:

7.1. Line Breaks

The <br> element creates a line break within text. Use it sparingly, as CSS is better for spacing:

First line<br>
Second line

7.2. Horizontal Rules

The <hr> element creates a horizontal line to separate content sections:

<section>First section</section>
<hr>
<section>Second section</section>

8. Conclusion

Common HTML elements like paragraphs, headings, links, images, and lists form the foundation of web content. Understanding how to use these elements correctly is essential for creating well-structured, accessible, and SEO-friendly web pages. Each element serves a specific purpose and should be used appropriately based on the content's meaning and structure.

In the next article, we'll explore HTML attributes, which add properties and functionality to HTML elements.