Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add an article in HTML5?
In this article we are going to learn about how to add an article in HTML5.
One of the new sectioning elements in HTML5 is the <article> tag. An article is represented in HTML using the <article> tag. More specifically, the content contained in the <article> element is distinct from the rest of the site's content (even though it can be related).
Let’s consider the following examples to know how to add an article in HTML5
Example 1
In the following examples we are using inline styling in an article element.
<!DOCTYPE html>
<html>
<body>
<article style="width: 300px;border: 2px solid gray;padding: 10px;border-radius: 10px;margin: 5px;">
<img src="https://www.tutorialspoint.com/static/images/logo-color-footer.png"alt="image"width="300"height="250"class="alignnone size-medium wp-image-560930"/>
<h1>TutorialsPoint</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content</p>
</article>
</body>
</html>
When the script gets executed, it will generate an output displaying the image uploaded using scr along with the text used inside the <article> tag on the webpage.
Example 2
Consider the following example we are creating three independent articles and self-contained content.
<!DOCTYPE html>
<html>
<body>
<article>
<h1>MSD</h1>
<p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captain of the Indian national cricket team in limited-overs formats</p>
</article>
<article>
<h2>YUVI</h2>
<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</p>
</article>
<article>
<h3>SREYAS IYER</h3>
<p>Shreyas Santosh Iyer is an Indian cricketer who plays for the national side in international cricket, Mumbai in domestic cricket</p>
</article>
</body>
</html>
On running the above script, it will generate an output consisting of the article tag text used in the script on the webpage.
832 Views
