Semantic | HTML

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,061,916
3.	Videos	353,254
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Semantic

Semantic Elements

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

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

HTML Semantic Elements

HTML <section> Element

The <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."

Examples of where a <section> element can be used:

Chapters
Introduction
News items
Contact information

A web page could normally be split into sections for introduction, content, and contact information.

<!DOCTYPE html>
<html>
<head>
<title>Semantic Elements</title>
</head>
<body>

<section>
  <h1>GSSS KHOKHAR</h1>
ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ  ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ।  ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.
</section>

<section>
  <h1>Computer Lab</h1>
The computer lab serves as the center for teaching computer use to whole classes, usually by a specialist computer teacher. Well-designed and separate computer labs for students, run by a well-educated and qualified faculty, with one-on-one access, which means there is one computer for each child. School kids learn words through PowerPoint presentations, other software and HTML, C Programming.
</section>

</body>
</html>

Live Demo & Try it yourself!

Semantic Elements in HTML

Below is a list of some of the semantic elements 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

#HTML #section #Semantic Elements

article Element

The <article> 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.

Examples of where the <article> element can be used:

Forum posts
Blog posts
User comments
Product cards
Newspaper articles

<!DOCTYPE html>
<html>
<head>
<title>article element</title>
</head>
<body>

<h1>The article element</h1>

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

</body>
</html>

Live Demo & Try it yourself!

#HTML #article #semantic

article Element with CSS

<!DOCTYPE html>
<html>
<head>
<title>article element with CSS</title>
<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>

Live Demo & Try it yourself!

#CSS #HTML #article #semantic

Nesting article in section or Vice Versa?

The <article> element specifies independent, self-contained content.

The <section> element defines 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.

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>)
logo or icon
authorship information

Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>GSSS KHOKHAR</h1>
    <p>Sri Muktsar Sahib</p>
  </header>
  <p>ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ  ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ।  ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.</p>
</article>

</body>
</html>

Live Demo & Try it yourself!

#HTML #section #article #semantic

footer Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

authorship information
copyright information
contact information
sitemap
back to top links
related documents

You can have several <footer> elements in one document.

Example

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Author: GSSS KHOKHAR</p>
  <p><a href="mailto:gss.khokhar.mks@punjabeducation.gov.in">gss.khokhar.mks@punjabeducation.gov.in</a></p>
</footer>

</body>
</html>

Live Demo & Try it yourself!

#HTML #semantic #footer

nav Element

The <nav> element defines a set of navigation links.

<!DOCTYPE html>
<html>
<body>

<nav>
  <a href="https://www.gssskhokhar.com/html/" target="_blank">HTML</a> |
  <a href="https://www.gssskhokhar.com/c/" target="_blank">C</a> |
  <a href="https://www.gssskhokhar.com/js/" target="_blank">JavaScript</a> |
  <a href="https://www.gssskhokhar.com/php/" target="_blank"">PHP</a>
</nav>

</body>
</html>

Live Demo & Try it yourself!

#HTML #semantic #nav

aside Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

<!DOCTYPE html>
<html>
<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>
  <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>

</body>
</html>

Live Demo & Try it yourself!

#HTML #semantic #aside

Use CSS to style the aside element:

<!DOCTYPE html>
<html>
<head>
<style>
aside {width: 30%;padding-left: 15px;margin-left: 15px;float: right;font-style: italic;background-color: lightgray;}
</style>
</head>
<body>

<p>ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ  ਗਿਆ. </p>

<aside>
<p>VPO, KHOKHAR
Tehsil & District Sri Muktsar Sahib 
Punjab, India
Pin Code : 152025</p>
</aside>

<p>2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ।  ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.</p>

<p>ਮੌਜੂਦਾ ਸਮੇ ਵਿਚ ਸਕੂਲ ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਖਿੱਚ ਦਾ ਕੇਂਦਰ ਹੈ. ਕਿਤਾਬਾਂ ਨਾਲ ਭਰੀ-ਪੁਰੀ ਲਾਇਬ੍ਰੇਰੀ, ਆਧੁਨਿਕ ਟੈਕਨੋਲੋਜੀ ਨਾਲ ਲੈਸ ਕੰਪਿਊਟਰ ਲੈਬ, ਐਜੂਸੈਟ ਲੈਬ, ਸਾਇੰਸ ਲੈਬ, ਮੈਥ ਕਾਰਨਰ ਅਤੇ ਐਸ.ਐਸ ਕਾਰਨਰ ਸਕੂਲ ਦੀ ਸ਼ਾਨ ਹਨ. ਸਕੂਲ ਵਿਚ ਸਥਾਪਿਤ ਕੀਤੇ ਵਿੱਦਿਅਕ ਪਾਰਕ ਵੇਖਣ ਯੋਗ ਹਨ. ਸਕੂਲ ਦਾ ਮਿਹਨਤੀ ਅਤੇ ਤਜਰਬੇਕਾਰ ਸਟਾਫ ਸਕੂਲ ਵਿਚ ਪੂਰਨ ਵਿੱਦਿਅਕ ਮਾਹੌਲ ਦੀ ਨੁਹਾਰ ਖਿੱਚ ਪਾਉਂਦੀ ਹੈ.</p>

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #aside #semantics

figure and figcaption Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

<!DOCTYPE html>
<html>
<head>
<title>figure and figcaption Elements</title>
</head>
<body>

<h2>ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ</h2>

figure and figcaption Elements

<figure>
  <img src="/images/welcome_school.gif" alt="cat" style="width:100%">
  <figcaption>Fig.1 - GSSS KHOKHAR, Sri Muktsar Sahib.</figcaption>
</figure>

</body>
</html>

Live Demo & Try it yourself!