What is semantic HTML? What are their advantages? [Resolved]

Posted by Amatya under HTML 5 on 4/7/2016 | Points: 10 | Views : 1105 | Status : [Member] | Replies : 4
What is semantic HTML? What are their advantages?

Feel free to share informations.
mail Id ' adityagupta200@gmail.com
Thanks



Responses

Posted by: Professionaluser on: 4/7/2016 [Member] [MVP] Bronze | Points: 50

Up
0
Down

Resolved
A semantic element clearly describes its meaning to both the browser and the developer.Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what a “paragraph” is and browsers know how to display them. In HTML4* tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any meaning to the text.

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

Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
Tag 	        Description  
<article> Defines an article
<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

Use of Semantic HTML:
With HTML4, developers used their own favorite attribute names to style page elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ------> This made it impossible for search engines to identify the correct web page content.

With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.

Semantic HTML "Allows data to be shared and reused across applications, enterprises, and communities ."


Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Manideepgoud on: 4/7/2016 [Member] Starter | Points: 25

Up
0
Down
Semantic elements
Semantic elements defines about parts of webpage by using <header>, <footer>, <section>, <article>,<aside>, <main>, <summary>, <mark> etc

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Debendra256 on: 4/11/2016 [Member] Starter | Points: 25

Up
0
Down
Html is a tag based languages.For every action we are using tag.In these some tag name itself describe the use of this inside the web page like.
<form>
<table>
<img>
some of HTML5 tage are-
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Thus these tags which describe its role by its name is called scemantic tags or Semantic elements.

Debendra Dash

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Purvi on: 8/29/2019 [Member] Starter | Points: 25

Up
0
Down
Semantic markup is a way your site architecture separates presentation from content; essentially saying that HTML is used for structure and CSS is used for the style of your web design.

when you write a heading, mark it with a heading tag (<h1>, <h2>, etc.). When you write a paragraph, mark it with a paragraph tag (<p>). Semantic markup means that HTML tags are never chosen based on the way they appear in a web browser — they’re chosen based on the importance and structure of the content.

While HTML has included semantic markup from the beginning, the advent of HTML5 brought with it even more semantic tags such as <section>, <article>, <footer>, <nav>, and <aside>. The goal is to make it easier for browsers, developers, and crawlers to distinguish between different types of data. All of these semantic tags make it clearer what information is on the webpage as well as its importance. Previously, a page might have been structured using only divs, which give no information to search engines, crawlers, or other developers what that part of the page is about. Using semantic markup, developers can be more explicit about the overall content and write it in a way that computers can understand as well.

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response