HTML SEMANTIC ELEMENT

HTML Element: Content

Every HTML element has an inbuilt content and we can see element on their default build up content base on design pattern they have with themselves as relative to inbuilt properties. These elements are divided into two for better understanding and they are as follows Semantic and Non-semantic element .

Semantics And Non-semantic Elements

Semantic elements shows the properties of its elements and relative relevant base on their inbuilt content. they are used to define different parts of a web page and shows the content clearly. while Non-sematic elements shows nothing regarding its content. Semantic elements allows data to be shared and reused across applications, enterprises, and communities.

HTML SEMANTIC ELEMENTS

• <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
• <nave> Defines navigation links
• <section> Defines a section in a document
• <summary> Defines a visible heading for a <details> element
• <time>Defines a date/time

Examples of Non-Semantic elements are <div> <span>;

HTML <section > Element

The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading.

HTML < article > Element

The <article> element specifies independent, self-contained content. An article is a set of paragraghs that canstan on their own, and is possible to read it independently from the rest of the web site. The <article > element can be used when making a Forum post, Blog post or Newspaper article PLEASE NOTE: The <article > element can be nested in <section > and the reverse is also possible.

HTML <header> Element

The <header> element indicates a header for a document or section. The <header> element is used as a container for introduction of a content. You can have several <header>elements in one document. the following examples shows a <header> inside an <article>

HTML <footer> Element

The<footer>element like the <header> specifies a footer for a document or section. A basic footer usually contains the name and signature of author of the document, copyright information, links to terms of use,contact information, ads and whatever else seen fit You may have several <footer> elements in one document but only one footer in a section.

HTML <nav> Element

The <nav> element states a set of navigation links. Although not all links of a document should be inside a <nav> element. but The <nav> element is resevred for only major block of navigation links.

HTML <aside> Element

The <aside> element is like a side bar, it explains some content aside from the content it is placed in but it is related to the surrounding content.

HTML <figure> and <figcaption> Element

The <figure> and <figcaption>are used in grouping images together while giving them a visual explanation.