Content Elements

Beyond structural elements, HTML5 provides semantic elements for specific types of content like articles, figures, time, and more.

Article Element

The <article> element:

• Self-contained, independent content
• Could be distributed separately
• Examples: blog post, news article, comment, widget

Multiple Articles

Figure and Figcaption

<figure> works for:

• Images with captions
• Code snippets
• Diagrams and charts
• Quotes

Time Element

The datetime attribute:

• Machine-readable format
• ISO 8601 standard
• Helps search engines and calendars

Address Element

The <address> element:

• Contact information
• For the nearest article or body
• Not for general addresses

Details and Summary

Native expandable content:

• <details> - Container
• <summary> - Visible heading
• open attribute - Start expanded

Mark Element

Progress and Meter

Exercise: Create a Blog Post

Create a complete semantic blog post:

Content elements add meaning to specific types of information!