Scribd
Upload
244 views1 page

HTML5 - New Semantic Elements

This document introduces several new semantic HTML5 elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>. It provides an example of how to use these elements to structure a news website with a header, navigation menu, main content divided into sections and articles, sidebar, and footer.

Uploaded by

Elvis Kadic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
244 views1 page

HTML5 - New Semantic Elements

This document introduces several new semantic HTML5 elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>. It provides an example of how to use these elements to structure a news website with a header, navigation menu, main content divided into sections and articles, sidebar, and footer.

Uploaded by

Elvis Kadic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

New Semantic Elements <article> <aside> <footer> <header> <main> <nav> <section>

The following is the HTML code for a sample web page that uses semantic elements that are new to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News</title>
</head>
<body>
<header>
<h1>News</h1>
<p>Local and National News</p>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="archive.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section>
<h2>Local News</h2>
<article>
<header>
<h3>Fire fighters rescue man from building</h3>
<p>(author, date)</p>
</header>
<p>This is the story text. This is the story text.</p>
<p>This is the story text. This is the story text.</p>
</article>
<article>
<header>
<h3>New Library to be built</h3>
<p>(author, date)</p>
</header>
<p>This is the story text. This is the story text.</p>
<p>This is the story text. This is the story text.</p>
</article>
</section>
<section>
<h2>National News</h2>
<article>
<header>
<h3>Snow storm is making travel difficult</h3>
<p>(author, date)</p>
</header>
<p>This is the story text. This is the story text.</p>
<p>This is the story text. This is the story text.</p>
</article>
<article>
<header>
<h3>Thousands are without power</h3>
<p>(author, date)</p>
</header>
<p>This is the story text. This is the story text.</p>
<p>This is the story text. This is the story text.</p>
</article>
</section>
</main>
<aside>
<h2>Be a news reporter</h2>
<p>If you see news happening - Send us a Text.</p>
</aside>
<footer>
<p>Footer Information</p>
</footer>
</body>
</html>

You might also like