Loading lesson path
Concept visual
Start at both ends
Formula
Semantic elements = elements with a meaning.A semantic element clearly describes its meaning to both the browser and the developer.
<div> and <span> - Tells nothing about its content.
<img>, <table>, and <article> - Clearly defines its content.
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. In HTML there are several semantic elements that can be used to define different parts of a web page: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
Formula
HTML < section > Element<section> element defines a section in a document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."
<section> element can be used:
A web page could normally be split into sections for introduction, content, and contact information.
<section>
Formula
< h1 > WWF </h1 ><p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section>
Formula
< h1 > WWF's Panda symbol </h1 >
< p > The Panda has become the symbol of WWF.The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>
Formula
HTML < article > Element<article>
Formula
element specifies independent, self - contained content.An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
<article> element can be used:
Formula
Three articles with independent, self - contained content:<article>
Formula
< h2 > Google Chrome </h2 ><p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article>
Formula
< h2 > MozillaFirefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article>
Formula
< h2 > Microsoft Edge </h2 >
< p > Microsoft Edge is a web browser developed by Microsoft, released in 2015.Microsoft Edge replaced Internet Explorer.</p> </article>
Formula
Use CSS to style the < article > element:<html> <head>
<style>.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}.browser {
background: white;
}.browser > h2, p {
margin: 4px;
font-size: 90%;
}</style> </head> <body>
Formula
< article class ="all - browsers">
< h1 > MostPopular Browsers</h1> <article class="browser">
Formula
< h2 > Google Chrome </h2 ><p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser">
Formula
< h2 > Mozilla Firefox </h2 ><p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser">
Formula
< h2 > Microsoft Edge </h2 >
< p > Microsoft Edge is a web browser developed by Microsoft, released in 2015.Microsoft Edge replaced Internet Explorer.</p> </article> </article> </body> </html>
Formula
Nesting < article > in < section > or Vice Versa?<article>
Formula
element specifies independent, self - contained content.<section> element defines a section in a document. Can we use the definitions to decide how to nest those elements? No, we cannot! So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
Formula
HTML < header > Element