개인공부/TIL(Today I Learned)

TIL 6일차_시맨틱태그

soon327 2021. 1. 24. 02:59

시맨틱 태그

대략적인 구조

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>시맨틱 구조</title>
  </head>
  <body>
      <header> 머리말 </header>
      <nav>메뉴바</nav>
      <section>
      본문 제목 및 내용
          <article> 콘텐츠 </article>
      </section>
  <aside> 사이드바 </aside>
  <footer> 꼬리말 </footer>
  </body>
  </html>

HTML(Hyper Text Markup Language)은 웹에서 웹페이지의 뼈대를 만들고 레이아웃을 구성한다.
웹사이트마다 다르지만, 대체로 헤더(header), 내비게이션(Nav), 콘텐츠(main), 푸터(footer)의 조합으로 만들어진다.

헤더: 사이트의 이름이나 로고 등을 넣는다. 일종의 간판.
내비게이션: 페이지 전환, 로그인 등 사이트의 공통기능이 들어간다.
콘텐츠: 글 목록이나 본문 등 실제 내용이 들어간다.
푸터: 회사 정보나 약관 등의 부가정보가 배치된다.

왜 시맨틱 태그를 사용해야 하는가?

검색엔진 최적화(SEO: Search Engine Optimization)

사실 <div>와 <span>만으로도 웹사이트를 만들 수 있다. 그러나 이 태그만으로는 사용한 문서에서 어떤 부분이 어떠한 목적을 담고있는지 알기 힘들다. 검색엔진마다 그들만의 알고리즘으로 페이지를 방문하고 수집한다. 따라서 문서의 제목에 해당하는<title>, 본문 영역을 표시하는 <main>, 글 제목 <h1> 등 주요 항목을 별도의 태그로 구분한 문서가 의미에 맞게 구성한 웹페이지라 할 수 있고, 검색 결과 상위에 노출될 확률이 높다.

또한, 내가 작성한 HTML 코드를 다른 개발자가 읽을 때, 시멘틱 태그가 적절히 사용되어 있다면 코드만 읽어봐도 웹페이지가 어떻게 구성되어 있는지 쉽게 파악이 가능할 것이다.

시맨틱 레이아웃

1. 헤더 영역 : <header>, <nav>

웹사사이트의 로고와 소개글, 메인메뉴가 위치하게 된다.
헤더 영역안의 <h1>태그는 최상위 제목을 마크업하기 위해서 쓰이는데, 일반적인 웹페이지에서는 대부분 하나만 존재하게 된다.
<nav>태그는 웹페이지의 메인 네비게이션을 마크업할 때 쓴인다.

<header>태그와 <footer>태그는 웹페이지의 최상위 , 최하위 영역 뿐만아니라
하위영역(<article>``<section>...)안에서도 사용된다.

2. 메인 영역: <main>, <section>, <article>, <aside>

<main>태그는 문서에서 오직 한번만 사용한다. 본문을 뜻하며, 콘텐츠 내용 전체를 감싼다.
이 안에 <section>태그와 <article>태그, aside태그가 주로 사용된다.
<section>태그와 <article>태그는 헷갈리는데,
<section>태그는 웹페이지의 전반적인 컨텐츠를 마크업할 때 쓰이고
<article>태그는 독립적인 내용들을 각각 마크업할 때 쓰이는 듯 하다.
마지막으로 <aside>태그는 보조적인 컨텐츠( 사이드바, 배너바)를 마크업할 때 쓰인다.

3. 풋터 영역: <footer>

웹사이트의 저작권 정보, 연락처와 같은 메타 데이터가 위치한다.

그럼 <div>는???

<div>태그는 단순히 컨텐츠를 그룹화하는데만 사용된다.
따라서 시맨틱 태그를 적용하기 애매하거나, 주로 컨텐츠를 묶어서css 디자인을 적용하고 싶거나할 때 사용된다.

Today's ?!

마크다운에서의 백틱(`)과 백슬래쉬(\)

```으로 감싸면 코드블록이 생기는데 `로 감싸면 인라인코드를 작성할 수 있다.
따라서 중간중간 태그를 컨텐츠로 작성하고 싶을 때는, `로 감싸서 글자색배경을 주는 것처럼 작성하니까 보기좋다.
마크다운으로 작성할 떄, 컨텐츠로 적고싶은데 자꾸 태그로 작동해서 꺽쇠나 백킷을 어떻게 적을지 찾아보니
앞에 \만 써주면 되었다.