HTML. semantic / non-semantic elements

1. Non-semantic elements
: <div> and <span> - Tells nothing about its content.
- are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id.
- <span> element is in-line and usually used for a small chunk of HTML inside a line.
- <div>(division) element is block-line and used to group larger chunks of code.

 

2. Semantic elements
: Clearly defines its content.

: According to the W3C:
  "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

article	Defines an article. - specifies independent, self-contained content. - An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
aside	Defines content aside from the page content (like a sidebar). - should be related to the surrounding content.
details	Defines additional details that the user can view or hide.
figcaption	Defines a caption for a <figure> element. - The purpose of a caption is to add a visual explanation to an image.  - The The <img> element defines the image, the <figcaption> element defines the caption.
figure	Specifies self-contained content. - like illustrations, diagrams, photos, code listings, etc. - An image and a caption can be grouped together in a <figure> element
footer	Defines a footer for a document or section. - should contain information about its containing element. - A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
header	specifies a header for a document or section. - should be used as a container for introductory content. - You can have several elements in one document.
main	Specifies the main content of a document.
mark	Defines marked/highlighted text
nav	Defines a set of navigation links.
section	Defines a section in a document. - A section is a thematic grouping of content, typically with a heading.
summary	Defines a visible heading for a <details> element.
time	Defines a date/time.