Scribd
Upload
204 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
204 views

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
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