Skip to content
Search

Semantic HTML

lastmod 2023-03-11created 2023-03-077 edits

Semantic HTML is the use of HTML markup to reinforce the meaning or meaning of the information in web pages and web applications, rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents.

Semantic Web means "the web of meaning". The semantic web is a way of writing in which the elements in HTML tell browsers and developers what the content means.

To put it more simply, the semantic web is using tags whose tag names show their meaning (purpose).

Why you should write semantic HTML

When you write semantic HTML, not only developers but also browsers know what the tags mean. This is a big advantage for web accessibility, and at the same time lets browsers analyze the information in a web page.

It also helps with Search Engine Optimization. Search engines collect various information from web pages and show them for matching search keywords. Writing a semantic web makes it easier to show up in these search engines, which helps attract users to the site.

Finally, maintenance becomes easier. HTML written as a mere sequence of divs and spans is less readable than a semantic document. Giving tags appropriate id and class names is a chore in itself, and even when you do, it is often hard to grasp the structure and meaning at a glance.

With semantic tags, the tag name itself shows its purpose, so they can be said to be relatively advantageous for maintenance.

Semantic Tags

Among the ways of writing semantic HTML, there are tags whose tag name itself shows the meaning of the region. These are called semantic tags.

Example layout using semantic tags:

Semantic_HTML_Layout_Sample.png

Elements

There are about a hundred elements available.

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • main
  • mark
  • nav
  • section
  • summary
  • time

article vs section

article element
The article element holds content that is independent and can stand on its own.
Blog posts, forum posts, news articles, and so on can be grouped as an article.

: 

<article>
   사람
    <section>뚱뚱한 사람</section>
    <section>마른 사람</section>
</article>
section element
section separates documents that are related to each other.
Mainly used to divide a document by different topics

: 

<section id="content">
    <article>블로그 글1</article>
    <article>블로그 글2</article>
    <article>블로그 글3</article>
</section>

See also

Favoarite site

author Zer0 sitemap