HTML Academy · Oppitunti

article-elementti: itsenäinen sisältö

Käytä article-elementtiä itsenäisesti jaeltavaan sisältöön

Oppitunti 2/413 vaihetta

article-elementti: itsenäinen sisältö on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on article?

<article>-elementti edustaa itsenäistä ja erikseen jaeltavaa sisältöä:

Sillä on merkitys sellaisenaan, sivun asiayhteydestä riippumatta
Sen voisi julkaista muualla (RSS-syötteessä tai somen esikatselukorttina) ilman merkityksen katoamista

Milloin article-elementtiä käytetään

Käyttäkää <article>-elementtiä seuraaville:

Blogikirjoitukset
Uutisartikkelit
Foorumiviestit
Tuotekortit
Kommentit (yksittäiset kommentit ovat article-elementtejä)
Widgetit tai gadgetit

article-elementin rakenne

Tyypillinen article sisältää ylä- ja alatunnisteen sekä sisällön:

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

Sisäkkäiset articlet (kommentit)

Article-elementtejä voidaan sijoittaa sisäkkäin vastausten tai alisisällön esittämistä varten:

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

Tuotekortit article-elementteinä

Tuote- tai sisältökortit voivat olla article-elementtejä:

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

article vai section

Yleinen sekaannuksen aihe — article vai section:

<article> — itsenäinen kokonaisuus, joka olisi ymmärrettävä myös sivulta irrotettuna
<section> — temaattinen kokonaisuus, joka tarvitsee ympäröivän asiayhteyden ollakseen ymmärrettävä

<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

article ja Schema.org

Yhdistä article Schema.org JSON-LD:n kanssa hakutulosten rikastamista varten:

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

cite-elementti

Käyttäkää <cite>-elementtiä teoksen nimen tai tekijätiedon merkitsemiseen:

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

rel=author linkeissä

Merkitkää artikkelin sisäiset tekijyyteen liittyvät linkit määritteellä rel="author":

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

Useita article-elementtejä sivulla

Useita article-elementtejä voi esiintyä luettelossa tai syötteessä:

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

Milloin article-elementtiä ei käytetä

Älkää käyttäkö <article>-elementtiä seuraaville:

Yleiset sivun osiot, joilla ei ole itsenäistä merkitystä
Navigointielementit
Etusivun markkinointiosiot (käyttäkää <section>-elementtiä)
Sivupalkin widgetit (käyttäkää <aside>-elementtiä)

Pikatarkistus

Mikä on article-elementtiin kuuluvan sisällön määrittävä ominaisuus?

Vastaa interaktiivisessa oppitunnissa

Kertaus: article-elementti

Article-elementin tärkeimmät asiat:

Itsenäinen ja erikseen jaeltava sisältö
Sisältö voidaan syndikoida (RSS-syöte, somen esikatselu) ilman merkityksen katoamista
Esimerkkejä: blogikirjoitukset, uutiset, tuotekortit ja kommentit
Article-elementtejä voidaan sijoittaa sisäkkäin (julkaisu, jonka sisällä on kommentti-articleja)
Käyttäkää tekijyyteen liittyvissä article-elementin sisäisissä linkeissä määritettä rel="author"

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”article-elementti: itsenäinen sisältö” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “article-elementti: itsenäinen sisältö”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”article-elementti: itsenäinen sisältö”?

Käytä article-elementtiä itsenäisesti jaeltavaan sisältöön Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”article-elementti: itsenäinen sisältö”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: HTML Academy