Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/4

HTML Elements

0/4

HTML Attributes

0/1

HTML Headings

0/2

HTML Paragraphs

0/1

HTML Styles

0/2

HTML Formatting

0/1

HTML Quotation

0/3

HTML Comments

0/1

HTML Colors

0/11

HTML CSS

0/5

HTML Links

0/7

HTML Images

0/6

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/11

HTML Lists

0/4

HTML Block and Inline

0/4

HTML Div

0/4

HTML classes

0/4

HTML id

0/4

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/4

HTML Layout

0/1

HTML Responsive

0/8

HTML Computer Code

0/1

HTML Semantic

0/7

HTML Style Guide

0/10

HTML Entities

0/4

HTML Symbols

0/1

HTML Emojis

0/4

HTML Charsets

0/1

HTML URL Encode

0/3

HTML vs. XHTML

0/1

HTML Forms

0/35

HTML Graphics

0/5

HTML Media

0/15

HTML APIs

0/9

Text lesson

HTML <article> Element

The <article> element denotes content that is standalone and self-contained.

An article should be comprehensible independently and capable of distribution apart from the surrounding website.

Instances where the <article> element is suitable include:

Forum posts
Blog posts
User comments
Product descriptions
Newspaper articles

Example

Three pieces of content, each self-contained and independent:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Example 2

Utilize CSS for styling the <article> element:

<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>

<article class=”all-browsers”>
  <h1>Most Popular Browsers</h1>
  <article class=”browser”>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!</p>
  </article>
  <article class=”browser”>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class=”browser”>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>