[HTML] Semantic 태그

시멘틱(Semantic) 태그

 

이름만 봐도 의미를 알 수 있다.

 

ex) <p>태그 : 텍스트 단락(paragraph)

      <a>태그 : 앵커(anchor)

---

' 시멘틱 태그' 의 필요성

• HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알수 있다.
• 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.
• 인터넷에서 웹 사이트를 검색할 떄 필요한 내용을 정확히 찾을 수 있다.

웹 문서 구조를 만드는 주요 시멘틱 태그

1.  <header> 태그 헤더 영역 주로 맨 위쪽이나 왼쪽에 위치 검색 창이나 사이트 메뉴를 삽입

2.  <nav> 태그 네비게이션 영역 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크 포함

3.  <main> 태그 메인 콘텐츠 영역 웹 문서마다 다르게 보여 주는 내용으로 구성

4.  <article> 태그 웹에서 실제로 보여주고 싶은 내용을 삽입하는 영역

5.  <section> 태그 콘텐츠 영역 몇 개의 콘텐츠를 묶는 용도로 사용

6.  <aside> 태그 사이드바 영역 본문 내용 외에 왼쪽, 오른쪽 혹은 아래쪽에 위치

7. <div> 태그 <div> 요소는 종종 다른 HTML 요소의 컨테이너로 사용

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>