Categories
Learn HTML

HTML: article tag

HTML: <article> tag

In this series of learning HTML, we will teach you how to use HTML article tag with proper syntax and lots of examples. Let’s start on the HTML article tag.

Description of HTML article tag

The HTML “article” tag is used to define a self-contained piece of content that is intended to be independently distributable or reusable. The “article” tag is often used for blog posts, news articles, and other types of content that can be syndicated or republished on other websites.

Here is an example of how to use the “article” tag in HTML:

<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>

In the example above, the “article” tag is used to contain the title and content of a blog post or news article. The “article” tag is a semantic tag, which means that it provides meaningful information about the purpose and structure of the content within the tag.

The “article” tag can also be used in conjunction with other semantic tags, such as “header” and “footer”, to provide additional information about the structure of the content. For example:

<article>
<header>
<h2>Article Title</h2>
<p>Author name and date go here...</p>
</header>

<p>Article content goes here...</p>

<footer>
<p>Copyright information and related links go here...</p>
</footer>
</article>

 

In the example above, the “header” tag is used to contain information about the title, author, and date of the article, while the “footer” tag is used to contain information about the copyright and related links. By using semantic tags like “article”, “header”, and “footer”, the HTML code becomes more meaningful and easier to understand, both for human readers and for search engines.

 

 

 

Syntax of HTML article tag

The HTML <article> tag is used to define a self-contained, independent piece of content on a web page that could potentially be distributed or reused elsewhere. The syntax of the <article> tag is as follows:

<article>
<!-- content goes here -->
</article>

Here, the opening tag <article> is used to indicate the start of the article content, and the closing tag </article> is used to indicate the end of the article content. The content within the tags should be complete in itself, and not dependent on the rest of the web page for its meaning.

Example:

<article>
<h1>Article Title</h1>
<p>Article content goes here.</p>
<footer>
<p>Published on: <time datetime="2023-03-14">March 14, 2023</time></p>
</footer>
</article>

In this example, the <article> element contains a complete, independent piece of content with a title, main content, and a footer containing information about when it was published. The article can be reused or distributed on other web pages or platforms without any additional context.

 

Global Attributes

The global attributes that can be applied to an <article> tag in HTML are the same as those that can be applied to any HTML element. These attributes include:

  • accesskey: Specifies a shortcut key to activate/focus the element
  • class: Specifies one or more class names for the element (used for CSS styling)
  • contenteditable: Specifies whether the content of an element is editable or not
  • data-*: Used to store custom data private to the page or application
  • dir: Specifies the direction of the element’s text
  • draggable: Specifies whether the element is draggable or not
  • hidden: Specifies that the element should not be displayed
  • id: Specifies a unique ID for the element
  • lang: Specifies the language of the element’s content
  • style: Specifies inline CSS styles for the element
  • tabindex: Specifies the tab order of the element
  • title: Specifies extra information about the element (displayed as a tooltip)
  • translate: Specifies whether the content of the element should be translated or not

In addition to these global attributes, the <article> tag also has specific attributes that are related to its purpose as a container for a self-contained piece of content, such as:

  • cite: Specifies the source of a work that the article is based on or relevant to
  • pubdate: Specifies the publication date of the article
  • author: Specifies the author of the article

It’s important to note that the pubdate and author attributes are not standard global attributes, and are specific to the <article> tag.

 

 

Event Attributes

The event attributes that can be applied to an <article> tag in HTML are the same as those that can be applied to any HTML element. These event attributes include:

  • onabort: Triggered when the loading of an image is aborted
  • onblur: Triggered when an element loses focus
  • onchange: Triggered when the content of an element changes
  • onclick: Triggered when an element is clicked
  • ondblclick: Triggered when an element is double-clicked
  • onerror: Triggered when an error occurs while loading an image or other external resource
  • onfocus: Triggered when an element gains focus
  • onkeydown: Triggered when a key is pressed down
  • onkeypress: Triggered when a key is pressed and released
  • onkeyup: Triggered when a key is released
  • onload: Triggered when an element is finished loading
  • onmousedown: Triggered when a mouse button is pressed down on an element
  • onmousemove: Triggered when the mouse pointer moves over an element
  • onmouseout: Triggered when the mouse pointer moves out of an element
  • onmouseover: Triggered when the mouse pointer moves over an element
  • onmouseup: Triggered when a mouse button is released over an element
  • onreset: Triggered when a form is reset
  • onselect: Triggered when the content of a text input or textarea is selected
  • onsubmit: Triggered when a form is submitted
  • onunload: Triggered when a page is unloaded

Note that not all of these events are applicable to the <article> tag, and it’s important to use event attributes appropriately based on the functionality and purpose of the element.

 

 

Other Attributes

In addition to the global attributes that can be applied to any HTML element and the event attributes that can be used to define how an element responds to user actions, the <article> tag has specific attributes that are relevant to its purpose as a container for a self-contained piece of content. These attributes include:

  • cite: Specifies the source of a work that the article is based on or relevant to
  • pubdate: Specifies the publication date of the article
  • author: Specifies the author of the article

These attributes are not standard global attributes, and are specific to the <article> tag. It’s important to note that while these attributes can be useful in providing additional information about the content of an <article> element, they are not required for the element to function properly or be displayed correctly in a web page.

 

 

 

Notes on HTML article tag

The <article> tag is a semantic HTML element that is used to mark up self-contained pieces of content, such as blog posts, news articles, and product reviews. Here are some important notes to keep in mind when using the <article> tag:

  1. The <article> tag should only be used for content that is self-contained and can be independently distributed or reused. This means that the content within the <article> tag should be able to stand alone as a complete work, without needing to be read in the context of other content on the page.
  2. The <article> tag should not be used for content that is part of a larger work, such as a paragraph within a blog post or a list item within a news article. In these cases, other semantic tags such as <p> and <li> should be used instead.
  3. The <article> tag can be nested within other semantic tags such as <section> and <main> to provide additional context and structure for the content.
  4. The <article> tag can include additional information about the content using attributes such as cite, pubdate, and author.
  5. The use of semantic HTML elements like <article> can help improve the accessibility, search engine optimization, and overall structure and readability of a web page.
  6. It’s important to use the <article> tag appropriately based on the content and purpose of the web page. Overuse or misuse of semantic HTML elements can actually detract from the structure and readability of a page.

 

Browser Compatibility

The HTML article tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML article tag

We will discuss the <article> tag below, exploring examples of how to use the <article> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.


 

HTML 4.01 Transitional Document

You can not use the <article> tag in HTML 4.01 Transitional.

The <article> tag was not introduced until HTML5, so it is not available in HTML 4.01 Transitional. However, you can still mark up self-contained content using other semantic HTML elements. Here’s an example of how you might mark up an article in HTML 4.01 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example Article</title>
</head>
<body>
<div id="header">
<h1>Example Article</h1>
</div>
<div id="content">
<h2>Introduction</h2>
<p><em>Published on March 16, 2022 by John Doe</em></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat ut metus lobortis commodo. Nullam eu justo ut odio sagittis blandit. In hac habitasse platea dictumst.</p>
<p>Nunc vel suscipit ipsum, ac pellentesque ipsum. Sed in lorem quis leo semper malesuada. Pellentesque eu nunc dignissim, congue justo eget, commodo lorem. Integer faucibus ac velit eu suscipit. Proin vitae consectetur orci. Fusce faucibus, quam vel posuere sodales, mi enim luctus elit, vel feugiat nibh ante vel justo.</p>
</div>
<div id="footer">
<p>© 2022 Example Company. All rights reserved.</p>
</div>
</body>
</html>

 

In this example, the article is contained within a <div> with the id attribute of “content”. The article starts with a <h2> tag for the title of the section and an <em> tag with metadata about the article, including the publication date and author.

The main content of the article is contained within a series of <p> tags. The article ends with a <div> with the id attribute of “footer” that includes copyright information. While this markup is not as semantically clear as using the <article> tag in HTML5, it still provides some structure to the content and can be used to improve accessibility and SEO.

 

 

 

XHTML 1.0 Transitional Document

You can not use the <article> tag in XHTML 1.0 Transitional.

here’s an example of an XHTML 1.0 Transitional document using the HTML <article> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<article>
<h1>My Article Title</h1>
<p>Here's some content for my article. This could include text, images, or other media.</p>
<p>Another paragraph of content could go here.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Here's a link to another page: <a href="http://www.example.com">Example.com</a></p>
<p>And here's an image: <img src="image.jpg" alt="My Image" /></p>
</article>
</body>

</html>

In this example, we have a basic XHTML 1.0 Transitional document with an HTML <article> tag enclosing the content of the article. Inside the <article> tag, we have a <h1> tag for the article title, followed by some paragraphs of content, an unordered list, a link, and an image.

Note that we’ve also included a <meta> tag in the <head> section to specify the character encoding of the document as UTF-8. This is important to ensure that the document is correctly displayed across different browsers and devices.

 

XHTML 1.0 Strict Document

You can not use the <article> tag in XHTML 1.0 Strict.

Here’s an example of an XHTML 1.0 Strict document using the HTML <article> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<article>
<h1>My Article Title</h1>
<p>Here's some content for my article. This could include text, images, or other media.</p>
<p>Another paragraph of content could go here.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Here's a link to another page: <a href="http://www.example.com">Example.com</a></p>
<p>And here's an image: <img src="image.jpg" alt="My Image" /></p>
</article>
</body>

</html>

 

In this example, we have a basic XHTML 1.0 Strict document with an HTML <article> tag enclosing the content of the article. Inside the <article> tag, we have a <h1> tag for the article title, followed by some paragraphs of content, an unordered list, a link, and an image.

Note that this document uses the XHTML 1.0 Strict doctype, which enforces stricter rules for the markup than the Transitional doctype. For example, in the Strict doctype, all tags must be properly closed (e.g. <img> instead of <img />). Additionally, the use of some deprecated attributes and elements (such as the align attribute) is not allowed in the Strict doctype.

Also, note that we’ve included a <meta> tag in the <head> section to specify the character encoding of the document as UTF-8, which is important to ensure that the document is correctly displayed across different browsers and devices.

 

 

XHTML 1.1 Document

You can not use the <article> tag in XHTML 1.1.

Here’s an example of an XHTML 1.1 document using the HTML <article> tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Article</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<article>
<h1>My Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in magna quis tellus fermentum commodo. Duis faucibus sapien at metus egestas, vel iaculis leo euismod. Ut auctor velit vitae justo rutrum, sit amet viverra mi posuere. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed at enim orci. Fusce porttitor, dolor eu aliquet pellentesque, nulla nisi bibendum velit, ut rhoncus augue nunc ut mi. Aliquam et felis quis ante bibendum tincidunt.</p>
<p>Donec ut nisl auctor, dapibus nulla non, dignissim lectus. Nunc quis augue in quam egestas congue. Donec id quam id orci eleifend ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ut dapibus nulla. In vitae quam ut justo feugiat molestie. Ut et est nisl. Fusce vehicula lectus vitae velit maximus finibus. Donec at quam vel nisl rutrum blandit. Sed sit amet malesuada libero. Suspendisse potenti.</p>
<p>Phasellus at ultrices enim. Aenean scelerisque, lorem ac tempus rhoncus, augue lacus malesuada eros, sit amet vestibulum nisi quam quis nulla. Donec id magna id est tristique pharetra. Etiam imperdiet nunc quis elit malesuada, vel sagittis mi dictum. Curabitur nec semper nibh. Proin non faucibus odio. Aliquam nec massa metus. Fusce bibendum sem eget odio lobortis posuere.</p>
</article>
</body>
</html>

In this example, we have created an XHTML 1.1 document that includes an <article> tag. The <article> tag defines a self-contained piece of content, which can be used to represent a blog post, news article, or other similar content.

Inside the <article> tag, we have added three paragraphs of text, along with an <h1> tag to provide a heading for the article. The text itself is just placeholder content (Lorem Ipsum).

Note that the document is also encoded in UTF-8, and includes the necessary XML declaration and DOCTYPE declaration to ensure that it is a valid XHTML 1.1 document. Additionally, we have included a <meta> tag to specify that the document is encoded in XHTML and that the character set used is UTF-8.