files/de/web/html/element/article/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

---
title: '<article>: Das Inhaltselement für Artikel'
slug: Web/HTML/Element/article
tags:
  - Element
  - HTML
  - HTML Bereiche
  - HTML5
  - Referenz
  - Web
translation_of: Web/HTML/Element/article
---
<div>{{HTMLRef}}</div>

<p>Das <strong>HTML-Element <code>&lt;article&gt;</code></strong> stellt eine in sich geschlossene Komposition in einem Dokument, einer Seite, Anwendung oder Website dar, die unabhängig verteilt oder wiederverwendbar sein soll (z. B. bei Syndikation), z. B. ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel oder ein Blogeintrag.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>Ein bestimmtes Dokument kann mehrere Artikel enthalten, z. B. in einem Blog, in dem der Text jedes Artikels nacheinander angezeigt wird, während der Leser blättert, wäre jeder Beitrag in einem <code>&lt;article&gt;</code>-Element mit einem oder mehreren <code>&lt;section&gt;</code>-Elementen enthalten.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/de/docs/HTML/Content_categories">Inhaltskategorien</a></th>
   <td><a href="/de/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Sektionsinhalt, fühlbarer Inhalt</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td><a href="/de/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag Wegfall</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Jedes Element das <a href="/de/docs/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt. Beachten Sie, dass ein <code>&lt;article&gt;</code>-Element kein Nachkomme eines {{HTMLElement("address")}}-Elements sein darf.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte ARIA Rollen</th>
   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM-Schnittstelle</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p>Dieses Element unterstützt nur die <a class="new" href="/de/docs/Web/HTML/Global_attributes" rel="nofollow">globalen Attribute</a>.</p>

<h2 id="Nutzungshinweise">Nutzungshinweise</h2>

<ul>
 <li>Jeder <code>&lt;article&gt;</code> sollte beschriftet sein, normalerweise indem eine Überschrift (<a href="/de/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code></a>) als untergeordnetes Element des <code>&lt;article&gt;</code>-Elements eingefügt wird.</li>
 <li>Wenn ein <code>&lt;article&gt;</code>-Element verschachtelt ist, repräsentiert das innere Element einen Artikel, der sich auf das äußere Element bezieht. Zum Beispiel können die Kommentare eines Blogbeitrags <code>&lt;article&gt;</code>-Elemente sein, die im <code>&lt;article&gt;</code> des Blogbeitrags verschachtelt sind.</li>
 <li>Informationen zum Autor eines <code>&lt;article&gt;</code>-Elements können über das {{HTMLElement("address")}}-Element bereitgestellt werden, gelten jedoch nicht für verschachtelte <code>&lt;article&gt;</code>-Elemente.</li>
 <li>Das Datum und die Uhrzeit der Veröffentlichung eines <code>&lt;article&gt;</code>-Elements können mit dem Attribut {{htmlattrxref("datetime", "time")}} eines {{HTMLElement("time")}}-Elements beschrieben werden. <em>Beachten Sie, dass das Attribut {{htmlattrxref("pubdate", "time")}} von {{HTMLElement("time")}} nicht mehr Bestandteil des W3C HTML 5-Standards ist.</em></li>
</ul>

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: html">&lt;article class="film_review"&gt;
  &lt;header&gt;
    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
  &lt;/header&gt;
  &lt;section class="main_review"&gt;
    &lt;p&gt;Dinos were great!&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="user_reviews"&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Way too scary for me.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on
          &lt;time datetime="2015-05-16 19:00"&gt;May 16&lt;/time&gt;
          by Lisa.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;I agree, dinos are my favorite.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on
          &lt;time datetime="2015-05-17 19:00"&gt;May 17&lt;/time&gt;
          by Tom.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Posted on
      &lt;time datetime="2015-05-15 19:00"&gt;May 15&lt;/time&gt;
      by Staff.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>


<p>{{Compat("html.elements.article")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Andere abschnittsbezogene Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
 <li class="last"><a class="deki-ns current" href="/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Abschnitte und Umrisse eines HTML5-Dokuments</a></li>
</ul>