본문 바로가기
개발/웹 개발

Day 6: HTML과 시맨틱 웹

$ecu_Log 2024. 8. 2.

1. 오늘의 학습 목표

학습 목표: 웹 페이지의 구조를 만드는 HTML의 기본을 이해하고, 검색 엔진과 개발자 모두에게 코드의 의미를 명확히 전달하는 시맨틱 태그의 중요성과 사용법을 배웁니다.

핵심 요약: 시맨틱 웹은 단순히 모양만 만드는 것을 넘어, 콘텐츠에 '의미'를 부여하여 더 똑똑하고 접근성 높은 웹을 만드는 첫걸음입니다.

2. 핵심 개념 파헤치기 

2.1. HTML(HyperText Markup Language)이란?

HTML은 웹 페이지의 뼈대를 구성하는 마크업 언어입니다. 제목, 문단, 이미지, 링크 등 웹 페이지의 콘텐츠를 다양한 태그(Tag)를 사용해 구조화하는 역할을 합니다. 브라우저는 이 HTML 코드를 읽어서 Day 1에서 배운 렌더링 과정을 통해 화면에 표시해 줍니다.

 

2.2. 시맨틱(Semantic) HTML이란 무엇인가?

시맨틱이란 '의미론적인'이라는 뜻으로, 시맨틱 태그는 이름 자체에 콘텐츠의 의미를 명확하게 담고 있는 태그를 말합니다

  • Non-semantic 태그: <div>, <span> 등. 이 태그들은 콘텐츠에 대한 어떠한 정보도 담고 있지 않으며, 주로 레이아웃을 잡거나 스타일을 적용하기 위해 사용됩니다
  • Semantic 태그: <header>, <footer>, <nav>, <main>, <article>, <section> 등. 이 태그들은 이름만 봐도 해당 영역이 어떤 역할을 하는지 즉시 알 수 있습니다

왜 시맨틱 태그를 사용해야 할까?

  1. 검색 엔진 최적화(SEO): 검색 엔진이 웹 페이지의 구조와 핵심 콘텐츠를 더 잘 파악하여 검색 결과에 더 정확하게 노출시킬 수 있습니다.
  2. 웹 접근성: 스크린 리더와 같은 보조 기술이 페이지 구조를 쉽게 이해하고 사용자에게 전달할 수 있게 해줍니다.
  3. 코드 가독성 및 유지보수: 개발자가 코드를 더 쉽게 이해하고 관리할 수 있게 해줍니다.

3. 코드로 배우기

3.1. 구현 목표

의미가 없는 <div> 태그로만 구성된 웹 페이지 구조를 의미가 명확한 시맨틱 태그로 개선합니다.

 

3.2. [1단계: Non-semantic 코드 예시]

아래 코드는 화면상으로는 문제가 없어 보이지만, 어떤 div가 헤더인지, 내비게이션인지, 주요 내용인지 코드만 보고는 알기 어렵습니다.

<!-- Bad Example -->
<body>
  <div id="header">
    <h1>My Blog</h1>
  </div>

  <div id="nav">
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </div>

  <div id="main">
    <div class="post">
      <h2>Post Title</h2>
      <p>Post content...</p>
    </div>
  </div>

  <div id="footer">
    <p>&copy; 2025 My Blog</p>
  </div>
</body>

 

3.3. [2단계: Semantic 코드로 개선하기]

id나 class 이름으로 역할을 추측해야 했던 위 코드를 시맨틱 태그로 바꾸면 구조가 훨씬 명확해집니다.

<!-- Good Example -->
<body>
  <header>
    <h1>My Blog</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Post Title</h2>
      <p>Post content...</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>

4. 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>My Awesome Blog</h1>
  </header>

  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main>
    <!-- 독립적으로 배포하거나 재사용할 수 있는 콘텐츠 (블로그 글, 포럼 글 등) -->
    <article>
      <h2>First Blog Post</h2>
      <p>This is my very first blog post. It's about semantic HTML.</p>
      <!-- article 안의 주제별 그룹 -->
      <section>
        <h3>What is Semantics?</h3>
        <p>Semantics is the study of meaning...</p>
      </section>
    </article>
  </main>
  <footer>
    <p>Copyright &copy; 2025. All rights reserved.</p>
  </footer>
</body>
</html>

 

'개발 > 웹 개발' 카테고리의 다른 글

Day 8: CSS 박스 모델과 레이아웃 기초  (0) 2024.08.05
Day 7: CSS 선택자와 명시도  (0) 2024.08.02
Day 5: CORS (Cross-Origin Resource Sharing)  (1) 2024.08.01
Day 4: 동기 vs 비동기  (2) 2024.07.31
Day 3: REST API의 이해  (0) 2024.07.29

'개발/웹 개발' 관련글

티스토리툴바