HTML <article> Tag

Definition och användning

<article> Taggen definierar självständigt och innehållande innehåll.

Ett artikel bör kunna förstås självständigt och kan distribueras oberoende av hela webbplatsen.

<articel> Elementets potentiella källor inkluderar:

  • Foruminlägg
  • Blogginlägg
  • Nyhetsrapporter
  • Användarrecensioner

Observera:I webbläsaren:<article> Elementet visar inte någon speciell stil. Men du kan använda CSS för att styla <article> Element (se exempel nedan).

Se också:

HTML DOM Referenshandbok:Article-objekt

Exempel

Exempel 1

Trei innehåll som är självständiga och självständiga artiklar:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome är en webbläsare utvecklad av Google och lanserades 2008. Chrome är den mest populära webbläsaren i världen idag!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox är en öppen källkodswebbläsare utvecklad av Mozilla. Sedan januari 2018 har Firefox varit den andra mest populära webbläsaren.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge är en webbläsare som utvecklats av Microsoft och lanserades 2015. Microsoft Edge har ersatt Internet Explorer.</p>
</article>

Prova själv

Exempel 2

Använd CSS för att ställa in stilen för <article>-elementet:

<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>Mest populära webbläsare</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome är en webbläsare utvecklad av Google och lanserades 2008. Chrome är den mest populära webbläsaren i världen idag!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox är en öppen källkodswebbläsare utvecklad av Mozilla. Sedan januari 2018 har Firefox varit den andra mest populära webbläsaren.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge är en webbläsare som utvecklats av Microsoft och lanserades 2015. Microsoft Edge har ersatt Internet Explorer.</p>
  </article>
</article>
</body>
</html>

Prova själv

Globala egenskaper

<article> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<article> Etiketterna stöder också Händelseegenskaper i HTML.

Standarda CSS-inställningar

De flesta webbläsare använder följande standardvärden för att visa <article> Element:

article {
  display: block;
}

Webbläsarstöd

Tal i tabellen anger den första webbläsarens version som helt stöder detta element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1