HTML: Semantics
According to the dictionary, semantics means - "the branch of linguistics and logic concerned with meaning". In HTML, Semantics refers to elements that clearly describe their meaning in a way that is unsderstood clearly by both human and machine.
For example the tag <article> specifies
independent, self-contained content. It can be used when
creating a blog or forum post, newspaper article, or other
similar content.
Benefits of Semantics
- Its contents will be taken into account by search engines as keywords to affect the page's search rankings
- It can be used as a guide by screen readers to aid users who are blind in navigating a page.
- Finding meaningful sections of code is much simpler than sifting through countless divs, whether or whether they have semantic or namespaced classes.
- Suggests to the developer the type of data that will be populated
Examples of Semantics
The semantic elements in HTML5 are:
-
<article>- independent, self-contained content -
<aside>- content aside from the page content -
<details>- additional details that the user can view or hide -
<figcaption>- a caption for a<figure>element -
<figure>- self-contained content, like illustrations, diagrams, photos, code listings, etc. -
<footer>- a footer for a document or section -
<header>- a header for a document or section -
<main>- the main content of a document <mark>- marked/highlighted text<nav>- navigation links<section>- a section in a document-
<summary>- a visible heading for a<details>element <time>- a date/time
For further reading, you can check out: mdn web docs
Exercise: Build a website with semantics
Time to put what you've learned so far to the test. Try to recreate this web page using semantics and elements from the previous lessons
Once done, click the button below to check your answer
Show AnswerIf your code should look like this, good job!
And your document should look like this:
You may be wondering why the result is different from the example. For our document to look better, we will be using an CSS to style the document. That will be an entirely new topic. Proceed to the next course to learn more!