HTML Article Tag: How to Create Semantic Content

Semantic article tag in HTML uses clear tags that show the role of each part. These tags tell browsers and people what the content means.

The tag like <article> points to independent content. It helps search engines read the page better.

What is the <article> Tag in HTML?

The <article> tag shows a block of content that stands alone. You can move this block to other pages. It will still make sense by itself. This can be a blog post or a news story.

The syntax looks like this. Use this format when you write your code.

<article>
  Content goes here.
</article>

You write it like this to mark content as independent. The start tag begins the article. The end tag closes it. Any content inside the tags stays grouped as one unit.

The <article> tag helps browsers and tools read content as a single piece. This tag groups related text or media in one block. It also helps assistive tools find and show the main idea of the page.

Let’s look at an example to understand better.

<article>
  <h2>How to Plant Tomatoes</h2>
  <p>Tomatoes grow well in warm soil. Water them every few days.</p>
</article>

The heading names the topic. The paragraph gives steps. You can move this code to another page.

Nest and Combine <article> Tag with Other Tags in HTML

You can nest <article> inside other tags. You can also put tags inside <article>.

Take this example.

<section>
  <article>
    <h2>Local News</h2>
    <p>The city starts a new recycle plan.</p>
  </article>
  <article>
    <h2>Sports Update</h2>
    <p>The team wins the match last night.</p>
  </article>
</section>

This code puts two articles inside a section. Each article shows a story. The section groups the stories under a shared theme.

Consider this use case.

<article>
  <header>
    <h2>Recipe: Pancakes</h2>
  </header>
  <p>Mix flour and eggs and Cook on a hot pan.</p>
  <footer>
    <p>Author: Sam</p>
  </footer>
</article>

This example uses <header> and <footer> inside an article. The header shows the title. The footer shows extra info. The main text sits in the middle.

The Difference Between <article> and <section>

The <article> tag holds content that stands alone. You can take it out and read it alone.

The <section> tag groups content by theme. You use it to split a page into parts.

Here is a table that shows the key differences.

The <article> tag fits blog posts or product details. The <section> tag fits groups of related content on one topic.

How to Style the <article> Tag with CSS

You can style the <article> tag to look clear and neat. Here’s an example CSS.

article {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f9f9f9;
}

This CSS adds a border and padding. It also sets the spaces between articles and a background color.

Examples of <article> Tag in HTML

Blog Post Article:

<article>
  <h2>Tips of how to bake the Bread</h2>
  <p>Bread needs time to rise. Use fresh yeast and warm water for best results.</p>
</article>

This example shows a blog post about how to bake bread. The heading names the topic. The paragraph gives details. The code groups them as one unit.

News Story Article:

<article>
  <h2>Storm Hits Coast</h2>
  <p>Heavy rain floods streets. Officials warn drivers to stay home.</p>
</article>

This example shows a news story. It stands alone. You can copy it to another site.

Product Description Article:

<article>
  <h2>Wireless Headphones</h2>
  <p>These headphones play music for 20 hours. They charge in 2 hours.</p>
</article>

This article gives product details. It works well in a product catalog.

Recipe Article:

<article>
  <h2>Simple Salad</h2>
  <p>Mix tomatoes and cucumbers then add olive oil and salt.</p>
</article>

This article shows a recipe. It groups the steps as one complete piece.

Tutorial Article:

<article>
  <h2>How to Install a Plugin</h2>
  <p>Go to the plugin page. Click install. Wait for the message that says complete.</p>
</article>

This example shows a tutorial. It guides the reader step by step. The article tag holds the instructions together.

Wrapping Up

In this article, you learned what <article> means. You read how to write it and style it, and saw how to group it and when not to use it.

Here is a quick recap:

• Use <article> for content that can stand alone.
• Use the tag for full stories or posts.
• Combine it with <section> and semantic parts.
• Style it with borders and spaces.
• Use it only once per self-contained block.

FAQs

<section>
  <article>
    <header>
      <h2>Title</h2>
    </header>
    <p>Content here.</p>
  </article>
</section>

<article>
  <div>Box 1</div>
  <div>Box 2</div>
</article>

Similar Reads