- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Semantic
HTML Semantic Elements
What are Semantic Elements?
Both the browser and the developer can understand the meaning of a semantic element.
Examples of non-semantic elements include div>
and span>
, which convey no information about their contents.
<form>
, <table>
, and <article>
are examples of semantic elements that clearly define their content.
Semantic Elements in HTML
Numerous websites use HTML code such as <div
id="nav"><
div class="header"><div id="footer">
to denote navigation, header, and footer.
There are a number of semantic elements in HTML that can be used to define various portions of a web page:
-
<article>
-
<aside>
-
<details>
-
<figcaption>
-
<figure>
-
<footer>
-
<header>
-
<main>
-
<mark>
-
<nav>
-
<section>
-
<summary>
-
<time>
HTML Section Element
The <section>
element defines a document section.
According to the HTML documentation , a section is a thematic grouping of content that typically includes a heading.
Typically, a web page could be divided into introduction, content, and contact information sections.
<html>
<body>
<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>
</body>
</html>
HTML 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 an <article>
element can be used:
- Forum post
- Blog post
- Newspaper article
<html>
<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>
Nesting Article In Section Or Vice Versa?
The <article>
element specifies self-contained, independent content.
The <section>
element defines a document section.
Can the definitions be used to determine how to nest these elements? We simply cannot!
Therefore, HTML pages will contain <section>
elements that contain <article>
elements and <article>
elements that contain <section>
elements.
HTML Header Element
The <header>
element is a container for introductory content and navigational links.
Typically, a <header>
element contains:
- multiple heading elements
(<h1>-<h6>)
. - logo or icon attribution details
<html>
<body>
<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>
</body>
</html>
HTML Footer Element
The <footer>
element defines a document or section's footer.
Typically, a <footer>
element contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
Multiple <footer>
elements can exist in a single document.
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
</body>
</html>
HTML Nav Element
The <nav>
element specifies a collection of navigational links.
Please note that NOT all links within a document should be contained within a <nav>
element. The <nav>
element should only be used for large blocks of navigation links.
This element allows browsers, such as screen readers for disabled users, to determine whether the initial rendering of this content should be skipped.
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML Aside Element
The <aside>
element defines content that is distinct from the surrounding content (like a sidebar).
The content of the <aside> tag should be indirectly related to the surrounding text.
<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>
HTML Figure And Figcaption Elements
The <figure>
tag identifies content that is self-contained, such as illustrations, diagrams, photos, code listings, etc.
The <figcaption>
tag denotes a figure's caption. The <figcaption>
element may appear as either the first or last child of a <figure>
element.
The <img>
element specifies the image or illustration itself.
<html>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>
<figure>
<img src="images/flowers.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP