HTML-<article>-tagi

Määritelmä ja käyttö

<article> Tagi määrittelee itsenäisen ja sisäisen sisällön.

Artikkeli tulisi olla itsenäisesti ymmärrettävissä ja voida jakaa riippumatta koko sivustosta.

<articel> Elementin mahdolliset lähteet sisältävät:

  • Foorumipostaukset
  • Blogipostaukset
  • Uutiskirjoitukset
  • Käyttäjäkommentit

Huomioitavaa:Selaimessa:<article> Elementti ei näytä minkäänlaista erityistä tyylejä. Voit kuitenkin tyylittää sitä CSS:llä <article> Elementti (katso alla oleva esimerkki).

Katso myös:

HTML DOM -viittausoppikirja:Article-objekti

Esimerkki

Esimerkki 1

Kolme itsenäistä ja erillistä artikkelia:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome on Googlen kehittämä verkkoselain, joka julkaistiin vuonna 2008. Chrome on nykyään maailman suosituin verkkoselain!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox on been kehittämä avoimen lähdekoodin verkkoselain. Syyskuusta 2018 lähtien Firefox on ollut toiseksi suosituin verkkoselain.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge on Microsoftin kehittämä verkkoselain, joka julkaistiin vuonna 2015. Microsoft Edge korvasi Internet Explorerin.</p>
</article>

Kokeile itse

Esimerkki 2

Aseta <article>-elementin tyylit CSS:llä:

<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>Suosituimmat selaimet</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome on Googlen kehittämä verkkoselain, joka julkaistiin vuonna 2008. Chrome on nykyään maailman suosituin verkkoselain!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox on been kehittämä avoimen lähdekoodin verkkoselain. Syyskuusta 2018 lähtien Firefox on ollut toiseksi suosituin verkkoselain.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge on Microsoftin kehittämä verkkoselain, joka julkaistiin vuonna 2015. Microsoft Edge korvasi Internet Explorerin.</p>
  </article>
</article>
</body>
</html>

Kokeile itse

Globaalit attribuutit

<article> Tämä merkki tukee myös HTML:n globaalit attribuutit.

tapahtumat

<article> Tämä merkki tukee myös HTML:n tapahtumat.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <article> Elementti:

article {
  display: block;
}

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee elementtiä täysin.

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