본문으로 건너뛰기

Semantic Tags

Semantic Tags

In HTML, semantic tags are used to more clearly express the structure and content of a document.

These tags help semantically differentiate various parts of web documents, contributing to search engine optimization (SEO) and improving web accessibility.


<header> Tag

The <header> tag represents the header of a web page or section. It can include logos, navigation links, titles, etc.


Example

header tag example
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

The <footer> tag represents the footer of a web page or section. It can contain copyright information, contact information, a sitemap, etc.


Example

footer tag example
<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
<nav>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</footer>

The <nav> tag is for navigation links, typically used for linking to other pages or different parts within a page.


Example

nav tag example
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section> Tag

The <section> tag defines independent areas within a web page, typically organized by topic. Each section usually has a specific topic or purpose.


Example

section tag example
<section id="about">
<h2>About</h2>
<p>Thank you for visiting our website!</p>
</section>

<article> Tag

The <article> tag is used for independent content, such as articles, blog posts, user comments, etc.


Example

article tag example
<article>
<h2>Event News</h2>
<p>Here's the latest news about upcoming events.</p>
</article>

<main> Tag

The <main> tag represents the main content of a web page. The main content conveys the central topic or message of the page.


Example

main tag example
<main>
<h1>Welcome!</h1>
<p>Thank you for visiting our website.</p>
</main>

<aside> Tag

The <aside> tag represents content that is indirectly related to the main content. For example, it's used for placing advertisements or other links in a sidebar.


Example

aside tag example
<aside>
<h2>Announcements</h2>
<p>Check out the upcoming events and announcements!</p>
</aside>