Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
How Does Article Tag Work in HTML?
Examples to Implement HTML Tag
Example #7
結論
Home Web Front-end HTML Tutorial HTML Article Tag

HTML Article Tag

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Sep 04, 2024 pm 04:29 PM
html html5 HTML Tutorial HTML Properties HTML tags

HTML Article Tag has been introduced in HTML5 as a new edition. More specifically, they are found to represent an article. It is specified as independent data and probably used in forum posts, magazine publications, blogs, and user-enabled comments. It is represented by

tag. Moreover, defining a stylish element on a web page is similar to the
element. This article tag supports all types of browsers: Google Chrome, opera, internet explorer, and Edge. They are unlike a section tag of the general section but act as a standalone content part.

Syntax:

Here let’s see the immediate syntax of these tag elements.

1

2

3

<article>

<h1>…</h1>

</article>

Copy after login

The structure follows the start tag. The next preceding section has

tag or

that forms a sub-heading, gives exact semantic information of the content, and provides much richer and more appropriate meaningful information. Like other tags, this article tag also supports HTML attributes like event attributes and global attributes for their appropriate class.

Example of

tag:

1

2

3

4

<article>

<h1>Introduction to  CSS demo</h1>

<p>CSS is a cascading Style Sheet helps to make a web page visually colored</p>

</article>

Copy after login

How Does Article Tag Work in HTML?

This section will discuss a simple article tag (self-contained content in a document) and see how it works on a web page. HTML 5 introduces new semantic content to enrich the content in search engines. They do support global and event attributes for the content. The tag’s content is considered an independent document from the other content part on the single page. They can define or demonstrate an article’s name on the page, author information, and publication date. This

tag can be used as a single element and multiple
elements.

A document having a single article element explains the main content of the document. It has individual unique single content, whereas, in the case of multiple

tags, a page has various contents; in another way, they are equivalent
elements. The main aim of the
tag is to help HTML code in cleaning the content by reducing the work of the
element.

Examples to Implement HTML Tag

Below are the examples of implementing HTML Tag:

Example #1

Example using Single

tag.

Code:

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<title>HTML Article Tag demo</title>  </head>

<body>

<article>

<h2>python</h2>

<p>Python is a new programming language</p>

</article>

</body>

</html>

Copy after login

Output:

HTML Article Tag

Example #2

An example illustrates using attribute

with the CSS style. It makes use of CSS  to display well in the web browser.

Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<head>

<title>Demo of article</title>

</head>

<body>

<article style="width: 200px; border: 1px solid black;

padding: 8px; border-radius: 8px;

margin:6px;">

<article>

<address>

Written by xxxxxx.<br>

refer me at: <br>

https://www.educba.com/ <br>

</address>

</article>

Copy after login

The below output shows the visitors the web page with the address to the link.

Output:

HTML Article Tag

Example #3

An example Demonstrating how to display a date and time with

.

Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<head>

<title>Demo of article tag</title>

</head>

<body>

<article style="width: 200px; border: 1px solid black;

padding: 8px; border-radius: 8px; color :green;

margin:6px;">

<article class="blog_post">

<p>My first article post. Stay tuned</p>

<footer>

<p>

Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor

</p>

</footer>

</article>

Copy after login

Output:

HTML Article Tag

Example #4

Example using multiple articles. The below code uses the semantic element

to specify the most significant header within the HTML content.

Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<style>

.JAN {

margin: 1;

padding: .2rem;

background-color: #D2691E;

font: 2rem 'Fira Sans', sans-serif;

}

.JAN > h1,

.day {

margin: .4rem;

padding: .2rem;

font-size: 1rem;

}

.day {

background: border-box no-repeat

gray;

}

.day > h2,

.day > p {

margin: .2rem;

font-size: 1rem;

}

</style>

<article class="JAN">

<h1>FEDERAL HOLIDAYS IN USA</h1>

<article class="day">

<h2>01 JAN 2020</h2>

<p>NEW YEAR DAY.</p>

<p> martin luther day </p>

</article>

<article class="day">

<h2>18 feb 2020</h2>

<p>Presidents day.</p>

</article>

<article class="day">

<h2>05 May 2020</h2>

<h2>27 May 2020</h2>

<p>mothers day.</p>

<p>memorial day.</p>

</article>

</article>

Copy after login

Output:

HTML Article Tag

Example #5

We shall see the

tag is done with several
tags. Below are some pieces of code with output.

Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<style>

.art {

margin: 5;

padding: .3rem;

background-color: #DC143C;

font: 1rem 'italic', sans-serif;

}

</style>

<article class="art">

<section id="aim">

<p>[Main Objective]</p>

</section>

<section id="main_concept">

<p>[Content text]</p>

</section>

<section id="link page">

<ul>

<li><a href="tt.html">first link page</a></li>

<li><a href="th.html">second link page</a></li>

</ul>

</section>

</article>

Copy after login

Output:

HTML Article Tag

Example #6

Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<article>

<header>

<h1>On this page</h1>

<p>Published on 15th DEC 2019</p>

</header>

<p>WELCOME</p>

<p> EXAMPLES TOPIC</p>

<p>ILLUSTRATION</p>

<section>

<h2>Related topics</h2>

<article>

<footer>

<p>published by Mark winston</p>

</footer>

<p>This was a great article</p>

</article>

<article>

<footer>

<p>Posted by: Casey Brock</p>

</footer>

<p>What do you think about the topics with the comments please</p>

</article>

</section>

</article>

Copy after login

Here is a global header that contains web page headlines for any document with related content. Next comes the

tag, which links to the footer for a particular website and benefits SEO  by providing the company details in the footer section. Finally, the true way of using
tag is to embed or group the related contents of a page or, in another way; I can say that they are the autonomous section structure.

Output:

HTML Article Tag

Example #7

Article tag with the help of

tag.

Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<head>

<title>Demo of article tag</title>

</head>

<main>

<article>

<h1>Cloud computing Basics</h1>

<p>Used for data storage.</p>

<section>

<h2>Basic and syntax part</h2>

<p>With an example.</p>

</section>

<section>

<h2>Types of cloud computing services</h2>

<p>Private , public , hybrid</p>

</section>

</article>

</main>

Copy after login

Output:

HTML Article Tag

結論

結論として、この記事では Web ページで使用するためのいくつかのガイドについて説明します。これらは、単一の Web ページにドキュメント (独自に認識) またはコンテンツを含めるのに最適な選択肢であり、HTML5 では完璧なセマンティック要素であることが知られています。自己完結型のコンテキストであるため、最先端の Web サイトがこのタグを最大限に活用し始めたため、HTML5 で使用され、ブログや雑誌などのコンテンツを投稿する際にユーザーから報酬が得られます。

The above is the detailed content of HTML Article Tag. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055523 fails to install in Windows 11?
3 weeks ago By DDD
How to fix KB5055518 fails to install in Windows 10?
3 weeks ago By DDD
Strength Levels for Every Enemy & Monster in R.E.P.O.
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Roblox: Dead Rails - How To Tame Wolves
3 weeks ago By DDD
Blue Prince: How To Get To The Basement
3 weeks ago By DDD
Show More

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial
1653
14
CakePHP Tutorial
1413
52
Laravel Tutorial
1305
25
PHP Tutorial
1251
29
C# Tutorial
1224
24
Show More
Related knowledge
Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

See all articles