semantic elements code example

Example 1: html semantic tags mozilla

These are some of the roughly 100 semantic elements available:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Example 2: all semantic html tags

<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

Example 3: semantic elements

HTML has both non-semantic and semantic elements.
"Semantic" in HTML terms just means more specific

<div> and <span> are not semantic because they tell you nothing about their
contents, however, elements such as <article>, <figure>, <footer>, etc. are
semantic because they tell you exactly what they contain.

Example 4: Semantic Element

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Example 5: html semantic

<div></div>
    <span></span>
    <hr> <!-- horizontal rule is a divider -->
    <br> <!-- break make a break line -->
    <sup></sup> <!-- superscript add a notation (upp) -->
    <sub></sub> <!-- subscript add a notation (down) -->
    &lt; <!-- &; is used to print special or reserved character 
    &lt; = “<” and &gt; = “>” -->