lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>시맨틱 태그 예시</title>
  </head>

  <body>
    
    <header>
      <h1>웹 페이지</h1>
    </header>

    
    <nav>
      <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#news">뉴스</a></li>
        <li><a href="#contact">연락처</a></li>
      </ul>
    </nav>

    
    <main>
      <h1>환영합니다!</h1>
      <p>웹 페이지에 방문해 주셔서 감사합니다.</p>
    </main>

    
    <section id="about">
      <h2>소개</h2>
      <p>웹 페이지에 오신 것을 환영합니다!</p>
    </section>

    
    <article>
      <h2>행사 소식</h2>
      <p>다가오는 행사에 대한 정보입니다.</p>
    </article>

    
    <aside>
      <h2>공지사항</h2>
      <p>다가오는 이벤트와 공지를 확인해 보세요!</p>
    </aside>

    
    <footer>
      <p>ⓒ 2023 이름. All rights reserved.</p>
    </footer>
  </body>
</html>

# 시맨틱(Semantic) 태그

HTML 문서 내 **시맨틱**(Semantic, 의미) 태그를 사용하면 콘텐츠의 의미를 명확하게 전달할 수 있습니다.

시맨틱은 "의미를 가진"이라는 뜻으로, 어떤 부분이 header(머리말)인지, main(본문)인지, footer(꼬리말)인지 등을 명확하게 구분할 수 있도록 합니다.

시맨택 태그를 사용하면 웹 검색 엔진에 페이지의 의미를 명확하게 전달할 수 있어 검색 엔진 최적화(SEO)에 도움이 되고, 웹 접근성을 높일 수 있습니다.

주요 시맨틱 태그는 아래와 같습니다.

<br />

## `<header>` 태그

header 태그는 웹 페이지의 머리글 부분으로 웹페이지 상단에 로고, 내비게이션 메뉴, 회사 이름 등을 표시합니다.

<br />

### 예시

```html title="header 태그 예시"
<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>
```

<br />

## `<footer>` 태그

footer 태그는 웹페이지의 바닥글(꼬리말)로, 웹 사이트의 하단에 저작권 정보, 연결 링크, 저자 정보 등을 표기합니다.

<br />

### 예시

```html title="footer 태그 예시"
<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms of Service</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</footer>
```

<br />

<br />

## `<nav>` 태그

nav 태그는 header 태그 안에서 다른 페이지로 이동할 수 있는 링크들을 표시합니다.

<br />

### 예시

```html title="nav 태그 예시"
<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#news">뉴스</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>
```

<br />

## `<section>` 태그

`<section>` 태그는 페이지에서 특정 주제나 내용을 담당하는 영역입니다.

예를 들어 웹 페이지의 연락처 영역, 소개 영역, 뉴스 영역 등을 `<section>` 태그로 표시할 수 있습니다.

<br />

### 예시

```html title="section 태그 예시"
<section id="about">
  <h2>소개</h2>
  <p>저희 웹 페이지에 오신 것을 환영합니다!</p>
</section>
```

<br />

## `<article>` 태그

`<article>` 태그는 독립적으로 읽거나 재사용할 수 있는 영역을 정의합니다. 예를 들어 블로그 게시물, 뉴스 스토리, 사용자의 댓글 등에 `<article>` 태그를 사용할 수 있습니다.

<br />

### 예시

```html title="article 태그 예시"
<article>
  <h2>행사 소식</h2>
  <p>다가오는 행사에 대한 정보입니다.</p>
</article>
```

<br />

## `<main>` 태그

`<main>` 태그는 웹 페이지의 주요 컨텐츠를 정의합니다.

<br />

### 예시

```html title="main 태그 예시"
<main>
  <h1>환영합니다!</h1>
  <p>웹 페이지에 방문해 주셔서 감사합니다.</p>
</main>
```

<br />

## `<aside>` 태그

`<aside>` 태그는 페이지의 부가적인 콘텐츠를 표시합니다. 주로 오른쪽이나 왼쪽의 사이드바에 활용해 메인 컨텐츠와는 별개인 추가 정보와 관련 링크를 제공합니다.

<br />

### 예시

```html title="aside 태그 예시"
<aside>
  <h2>공지사항</h2>
  <p>이벤트를 확인해 보세요!</p>
  <div>
    <a href="#">이벤트 자세히 보기</a>
  </div>
</aside>
```

시맨틱 태그를 사용하면 페이지의 구조와 콘텐츠의 의미를 명확하게 전달할 수 있어 검색 엔진이 더 잘 이해할 수 있습니다. 이는 검색 엔진 최적화(SEO)에 도움이 되며, 웹 접근성도 향상시킵니다.

### 시맨틱 태그를 사용하면 웹 검색 엔진에 페이지의 의미를 명확하게 전달할 수 있다.

시맨틱(Semantic) 태그

<header> 태그

예시

<footer> 태그

예시

<nav> 태그

예시

<section> 태그

예시

<article> 태그

예시

<main> 태그

예시

<aside> 태그

예시

시맨틱 태그를 사용하면 웹 검색 엔진에 페이지의 의미를 명확하게 전달할 수 있다.

`<header>` 태그

`<footer>` 태그

`<nav>` 태그

`<section>` 태그

`<article>` 태그

`<main>` 태그

`<aside>` 태그