Menu
Coddy logo textTech

시맨틱 태그

Coddy HTML 여정의 기초 섹션에 포함된 레슨. 60개 중 27번째.

HTML의 시맨틱 태그는 콘텐츠의 의미를 정의하는 데 도움을 주어 개발자와 브라우저 모두가 코드를 더 명확하게 이해할 수 있도록 합니다. <div><span>과 달리, 시맨틱 태그는 포함된 콘텐츠에 맥락을 제공합니다.

일반적인 시맨틱 태그:

  • <header>: 일반적으로 상단에 있는 소개 콘텐츠입니다.
  • <nav>: 내비게이션 링크를 포함합니다.
  • <main>: 페이지의 주요 콘텐츠.
  • <article>: 블로그 게시물과 같은 독립적인 콘텐츠.
  • <section>: 관련된 콘텐츠를 그룹화하며, 대개 제목이 함께 포함됩니다.
  • <footer>: 저작권 또는 연락처 정보와 같은 내용이 포함된 하단 섹션입니다.
<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

이 구조는 콘텐츠를 명확하고 의미 있게 배치합니다.

challenge icon

챌린지

쉬움

시맨틱 HTML을 사용하여 영화 리뷰 페이지를 만드세요. 다음을 포함해야 합니다:

1. <header> 포함:

  • <h1> "Movie Reviews"
  • 다음 링크가 있는 <nav>: "Home", "Reviews", “Top Picks”

2. <main> 포함:

  • 다음을 포함하는 리뷰용 <article>:
    • 영화 이름이 있는 <h2>
    • 짧은 리뷰가 있는 <p>

3. <footer> 포함:

  • <p> "Copyright 2023 Movie Reviews"

직접 해보기

<!DOCTYPE html>
<html>
    <body>
        <!-- 여기에 코드를 작성하세요 -->
    </body>
</html>
quiz icon실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

기초의 모든 레슨

직접 연습해 보세요: Web 플레이그라운드