Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add an article in HTML5?
The article element is one of the new semantic sectioning elements introduced in HTML5. The <article> tag represents a self-contained composition in a document, such as a blog post, news article, forum post, or any independent piece of content that makes sense on its own.
The <article> element is particularly useful for content syndication, as it identifies content that could be distributed independently from the rest of the page. Search engines and screen readers also use this semantic information to better understand page structure.
Syntax
Following is the syntax for the <article> element in HTML5 −
<article> <!-- Self-contained content goes here --> </article>
The article element can contain headings, paragraphs, images, and other HTML elements that form a complete, independent piece of content.
Basic Article Example
Following example demonstrates a simple article with styling −
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Article Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<article style="width: 400px; border: 2px solid #ddd; padding: 20px; border-radius: 8px; margin: 10px; background-color: #f9f9f9;">
<h1>TutorialsPoint</h1>
<p><strong>Published:</strong> December 2024</p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and interaction with subject matter experts.</p>
<p>We provide high-quality educational content across various programming languages and technologies.</p>
</article>
</body>
</html>
The output displays a styled article with a border and background −
TutorialsPoint Published: December 2024 Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and interaction with subject matter experts. We provide high-quality educational content across various programming languages and technologies. (All content appears in a bordered box with light gray background)
Multiple Independent Articles
You can include multiple <article> elements on a single page, each representing independent content. Following example shows three separate articles about cricket players −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Articles Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5;">
<h1>Cricket Legends</h1>
<article style="margin-bottom: 20px; padding: 15px; background: white; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<h2>MS Dhoni</h2>
<p><em>Former Indian Cricket Captain</em></p>
<p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captain of the Indian national cricket team in limited-overs formats. Known for his calm demeanor and finishing abilities.</p>
</article>
<article style="margin-bottom: 20px; padding: 15px; background: white; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<h2>Yuvraj Singh</h2>
<p><em>All-rounder Extraordinaire</em></p>
<p>Yuvraj Singh is a former Indian international cricketer who played in all formats of the game. He is an all-rounder who batted left-handed in the middle order and bowled slow left-arm orthodox.</p>
</article>
<article style="margin-bottom: 20px; padding: 15px; background: white; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<h2>Shreyas Iyer</h2>
<p><em>Middle-order Batsman</em></p>
<p>Shreyas Santosh Iyer is an Indian cricketer who plays for the national side in international cricket and Mumbai in domestic cricket. He is known for his elegant strokeplay and leadership skills.</p>
</article>
</body>
</html>
Each article appears as an independent content block with its own styling and contains complete information about each cricket player.
Article with Header and Footer
Articles can include <header> and <footer> elements for better semantic structure −
<!DOCTYPE html>
<html>
<head>
<title>Article with Header and Footer</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<article style="max-width: 600px; border: 1px solid #ccc; padding: 0; border-radius: 8px; overflow: hidden;">
<header style="background-color: #4a90e2; color: white; padding: 20px;">
<h1 style="margin: 0;">Introduction to HTML5</h1>
<p style="margin: 5px 0 0 0; opacity: 0.9;">Published on December 15, 2024 by WebDev Team</p>
</header>
<div style="padding: 20px;">
<p>HTML5 is the latest version of the HyperText Markup Language, introducing new semantic elements, multimedia support, and enhanced functionality for modern web development.</p>
<p>Key features include the <code><article></code>, <code><section></code>, and <code><nav></code> elements that provide better document structure and accessibility.</p>
</div>
<footer style="background-color: #f8f9fa; padding: 15px; border-top: 1px solid #e9ecef; color: #6c757d; font-size: 14px;">
<p style="margin: 0;">Tags: HTML5, Web Development, Semantic Elements</p>
<p style="margin: 5px 0 0 0;">© 2024 TutorialsPoint. All rights reserved.</p>
</footer>
</article>
</body>
</html>
This creates a complete article structure with a blue header, content area, and footer containing metadata.
When to Use the Article Element
Use the <article> element when your content meets these criteria −
Independent − The content makes sense when taken out of context from the rest of the page.
Self-contained − The content is complete and doesn't depend on other content to be understood.
Reusable − The content could be syndicated, shared, or reused elsewhere.
Distinct topic − The content covers a specific subject or theme.
Common examples include blog posts, news articles, forum posts, product reviews, comments, and social media posts.
Conclusion
The HTML5 <article> element provides semantic meaning to self-contained content pieces, improving accessibility and SEO. Use it for independent content that could stand alone, and combine it with <header> and <footer> elements for better document structure. Each article should contain complete, meaningful content that makes sense outside the context of the surrounding page.
1K+ Views
