Question

Discuss the common semantic elements in HTML5 and how they are useful while creating a webpage

Discuss the common semantic elements in HTML5 and how they are useful while creating a webpage

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Semantic Elements: Those elements that have some meaning are known as semantic elements. A semantic element clearly defines some meaning to both the developer and the browser. Some of the most common semantic elements in HTML5 are mentioned below with some example of them:

  • <article> : This element is used to represent a self-contained composition in an HTML document, page, or application, that can be reused in future. Example:
<article>
    <h1>Heading of article</h1>
    <p>Text for article</p>
</article>
  • <aside> : This element is used to represent that section of an HTML document that is consists content that is related to the content specified around this <aside> element. Example:
<p>Some content here.</p>
<aside>
    <p>Aside content here related to above content</p>
</aside>
  • <details> : This element contains the information for a widget and that information will be visible only when that particular widget is toggled.
  • <figcaption> and <figure> : The <figcaption> element, from its name, specifies the caption that will related to an image or a figure. And, the <figure> element is used to represent the image in a document. Example:
<figure>
    <img src="">
    <figcaption>Figure caption or some information</figcaption>
</figure>
  • <footer> :  This element is used to specify the footer content for HTML document or a section of an HTML document, and commonly contains the information about its containing elements. Example:
<footer>
    <p>Some footer content</p>
</footer>
  • <header> : This element is used to specify the header content for HTML document or a section of an HTML document, and commonly contains the introductory information. Example:
<article>
    <header>
        <h1>Heading of article</h1>
        <p>Text in header for article</p>
    </header>
    <p>Text for article</p>
</article>
  • <main> : This represents the content of <body> element of an HTML document.
  • <nav> : This element defines the set of navigation links that can be visited in an HTML document or page.
<nav>
    <a href="#">HOME</a>
    <a href="#">CONTACT</a>
    <a href="#">ABOUT</a>
</nav>
  • <section> : This element, from its name, defines a section in a HTML document, such as chapters, headers, footers, or any other section of HTML document. Example of using <section> element:
<section>
    <h1>Section 1 of Document</h1>
    <p>Text for section 1. This can contain some text in a particular section</p>
</section>
<section>
    <h2>Section 2 of Document</h2>
    <p>
    Text for section 2. This can contain some text in a particular section
    </p>
</section>
  • <summary> : This element specifies the summary for <details> element.
  • <time> : As the name specifies, this element represents the specific period of time and can include "datetime" attribute to translate dates.

Advantages and Benefits of using Semantic Elements:

  • With the help of semantic elements in an HTML document, an additional information can be provided for that document, which increases the readability of that document, specially, the semantic elements made it clear to the browser and developer the meaning of a particular content page and its content.
  • Earlier, designers creates their own class(s) and id(s) names to style elements and writing CSS for all class(s) and id(s). It was difficult for search engines to identify the correct content of web page. But, by using semantic elements this become easier.

Add a comment
Know the answer?
Add Answer to:
Discuss the common semantic elements in HTML5 and how they are useful while creating a webpage
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT