HTML Semantiese Elemente
Semantiese elemente = elemente met 'n betekenis.
Wat is semantiese elemente?
'n Semantiese element beskryf duidelik die betekenis daarvan vir beide die blaaier en die ontwikkelaar.
Voorbeelde van nie-semantiese elemente: <div>en <span>- Vertel niks oor die inhoud daarvan nie.
Voorbeelde van semantiese elemente: <form>, <table>, en <article>- Definieer duidelik die inhoud daarvan.
Semantiese elemente in HTML
Baie webwerwe bevat HTML-kode soos: <div id="nav"> <div class="header"> <div id="footer"> om navigasie, kopskrif en voetskrif aan te dui.
In HTML is daar 'n paar semantiese elemente wat gebruik kan word om verskillende dele van 'n webblad te definieer:
- <artikel>
- <opsy>
- <besonderhede>
- <figcaption>
- <figuur>
- <voetskrif>
- <header>
- <hoof>
- <merk>
- <nav>
- <afdeling>
- <opsomming>
- <tyd>
HTML <afdeling> Element
Die <section>element definieer 'n afdeling in 'n dokument.
Volgens W3C se HTML-dokumentasie: "'n Afdeling is 'n tematiese groepering van inhoud, tipies met 'n opskrif."
Voorbeelde van waar 'n <section>element gebruik kan word:
- Hoofstukke
- Inleiding
- Nuus items
- Kontak inligting
'n Webbladsy kan gewoonlik in afdelings verdeel word vir inleiding, inhoud en kontakinligting.
Voorbeeld
Twee afdelings in 'n dokument:
<section>
<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>
<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>
HTML <artikel> Element
Die <article>element spesifiseer onafhanklike, selfstandige inhoud.
'n Artikel moet op sy eie sin maak, en dit moet moontlik wees om dit onafhanklik van die res van die webwerf te versprei.
Voorbeelde van waar die <article>element gebruik kan word:
- Forum plasings
- Blogplasings
- Gebruiker se opmerkings
- Produk kaarte
- Koerantartikels
Voorbeeld
Drie artikels met onafhanklike, selfstandige inhoud:
<article>
<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>
<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>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Voorbeeld 2
Gebruik CSS om die <artikel>-element te styl:
<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>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<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">
<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">
<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>
Neste <artikel> in <afdeling> of andersom?
Die <article>
element spesifiseer onafhanklike, selfstandige inhoud.
Die <section>element definieer afdeling in 'n dokument.
Kan ons die definisies gebruik om te besluit hoe om daardie elemente te nes? Nee, ons kan nie!
So, jy sal HTML-bladsye vind met <section>elemente wat <article>elemente bevat, en <article>elemente wat <section>elemente bevat.
HTML <header> Element
Die <header>element verteenwoordig 'n houer vir inleidende inhoud of 'n stel navigasieskakels.
'n <header>Element bevat tipies:
- een of meer opskrifelemente (<h1> - <h6>)
- logo of ikoon
- outeurskap inligting
Let wel: Jy kan verskeie <header>elemente in een HTML-dokument hê. Kan egter <header>nie binne 'n <footer>, <address>of 'n ander <header>element geplaas word nie.
Voorbeeld
'n Opskrif vir 'n <artikel>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML <footer> Element
Die <footer>element definieer 'n voetskrif vir 'n dokument of afdeling.
'n <footer>Element bevat tipies:
- outeurskap inligting
- kopiereg inligting
- Kontak inligting
- werfkaart
- terug na bo skakels
- verwante dokumente
Jy kan verskeie <footer>elemente in een dokument hê.
Voorbeeld
'n Onderskrifgedeelte in 'n dokument:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <nav> Element
Die <nav>element definieer 'n stel navigasieskakels.
Let daarop dat NIE alle skakels van 'n dokument binne 'n <nav>element moet wees nie. Die
<nav>element is slegs bedoel vir groot blok navigasieskakels.
Blaaiers, soos skermlesers vir gestremde gebruikers, kan hierdie element gebruik om te bepaal of die aanvanklike weergawe van hierdie inhoud weggelaat moet word.
Voorbeeld
'n Stel navigasieskakels:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <aside> Element
Die <aside>element definieer sommige inhoud afgesien van die inhoud waarin dit geplaas is (soos 'n sybalk).
Die <aside>inhoud moet indirek verband hou met die omliggende inhoud.
Voorbeeld
Vertoon sommige inhoud afgesien van die inhoud waarin dit geplaas is:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Voorbeeld 2
Gebruik CSS om die <aside>-element te styl:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTML <figuur> en <figcaption> Elemente
Die <figure>merker spesifiseer selfstandige inhoud, soos illustrasies, diagramme, foto's, kodelyste, ens.
Die <figcaption>merker definieer 'n byskrif vir 'n <figure>element. Die <figcaption>element kan as die eerste of as die laaste kind van 'n <figure>element geplaas word.
Die <img>element definieer die werklike beeld/illustrasie.
Voorbeeld
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Waarom semantiese elemente?
Volgens die W3C: "'n Semantiese web laat data gedeel en hergebruik word oor toepassings, ondernemings en gemeenskappe."
Semantiese elemente in HTML
Hieronder is 'n lys van sommige van die semantiese elemente in HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .