Lynxsia IT Solution

HTML Semantic Elements

Semantic Elements

Semantic elements are the elements with specific meaning. The name of the elements clearly defines the use to both the developer and the browser.

For example, <div> and <span> (non-semantic elements) describe nothing why it is used.

For example, <header> and <nav> (semantic elements) describe their use that is first one is header and second one is navigation.

Semantic Elements

HTML have various semantic elements to describe different part of the web page:

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

<article> And <section> Elements

The <section> element defines a thematic group of content, typically with heading.

The <article> element defines an independent, self contained, reusable, and distributable content.

News Article
Blog Posts
Social Posts
Comments
Product Cards

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <section>
                <h1>Latest News</h1>
                <article>
                  <h3>News 1</h3>
                  <p>News 1 description</p>
                </article>
                <article>
                  <h3>News 2</h3>
                  <p>News 2 description</p>
                </article>
              </section>
            </body>
          </html>

Test Code Online

<aside> Element

The <aside> element defines content that is aside from other content such as sidebar.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <h1>Lynxsia IT Solutions</h1>
              <p>
                We are concern with various development process like website design & development,
                E-commerce development, Software development, Application development,
                SMS & Bulk SMS Provider, PWA Development, and many more.
              </p>
              <aside>
                <h3>Sidebar Navigation</h3>
                <ul>
                  <li><a href="https://lynxsia.com/">Home</a></li>
                  <li><a href="https://lynxsia.com/about">About</a></li>
                  <li><a href="https://lynxsia.com/contact">Contact</a></li>
                </ul>
              </aside>
            </body>
          </html>

Test Code Online

<details> And <summary> Elements

The <details> element defines content with which user can interact to show and hide when needed.

The <summary> element defines a heading for the <details> element.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <details>
                <summary>Lynxsia IT Solutions</summary>
                <p>
                  We are concern with various development process like website design & development,
                  E-commerce development, Software development, Application development,
                  SMS & Bulk SMS Provider, PWA Development, and many more.
                </p>
              </details>
            </body>
          </html>

Test Code Online

<figure> And <figcaption> Elements

The <figure> element defines self-contained section for media like illustrations, images, etc.

The <figcaption> element defines a figure caption for the <figure> element.

The <img> element defines the actual figure.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <figure>
                <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png">
                <figcaption>Logo of Lynxsia IT Solutions</figcaption>
              </figure>
            </body>
          </html>

Test Code Online

<footer> Element

The <footer> element defines the footer for the document.

Sitemap
Copyright
Authority
Contact
Documents Links

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <footer>
                Copyright &copy; 2023 <strong>Lynxsia IT Solution</strong>.
              </footer>
            </body>
          </html>

Test Code Online

<header> And <hgroup> Elements

The <header> element defines at the top of the document, a section, or article containg main heading, logo, navigation links, search tools, etc.

The <hgroup> element defines a group of headings such as main title, sub title, etc.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <header>
                <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png">
                <ul>
                  <li><a href="https://lynxsia.com/">Home</a></li>
                  <li><a href="https://lynxsia.com/about">About</a></li>
                  <li><a href="https://lynxsia.com/contact">Contact</a></li>
                </ul>
              </header>
              <hgroup>
                <h1>Main title</h1>
                <h3>Subtitle</h3>
                <p>Descripton</p>
              </hgroup>
            </body>
          </html>

Test Code Online

<main> Element

The <main> element defines the main content of the document. The content inside <main> element should be unique

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <main>
                <h1>Latest News</h1>
                <article>
                  <h3>News 1</h3>
                  <p>News 1 description</p>
                </article>
                <article>
                  <h3>News 2</h3>
                  <p>News 2 description</p>
                </article>
              </main>
            </body>
          </html>

Test Code Online

<mark> Element

The <mark> element defines highlighted, and marked text.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <p>Sales end on <mark>12-02-2023</mark></p>
            </body>
          </html>

Test Code Online

<nav> Element

The <nav> element defines a group of important navigation links such as header, sidebar, footer.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <header>
                <nav>
                  <ul>
                    <li><a href="https://lynxsia.com/">Home</a></li>
                    <li><a href="https://lynxsia.com/about">About</a></li>
                    <li><a href="https://lynxsia.com/contact">Contact</a></li>
                  </ul>
                </nav>
              </header>
            </body>
          </html>

Test Code Online

<time> Element

The <time> element defines date and time.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>              
              <p>Office time is from <time>10:00</time> and we are off on <time>20-12-2022</time></p>
            </body>
          </html>

Test Code Online

View HTML PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads

HTML Semantic Elements

Semantic Elements

Semantic Elements

<article> And <section> Elements

Let's see with some example

<aside> Element

Let's see with some example

<details> And <summary> Elements

Let's see with some example

<figure> And <figcaption> Elements

Let's see with some example

<footer> Element

Let's see with some example

<header> And <hgroup> Elements

Let's see with some example

<main> Element

Let's see with some example

<mark> Element

Let's see with some example

<nav> Element

Let's see with some example

<time> Element

Let's see with some example

Report Us

Solutions

Prices

Industries

Resources

Lynxsia IT Solutions