HTML) 시맨틱 태그 총 정리

HTML 시맨틱 태그란?

• semantic ⇒ 의미의, 의미가 있는 Tag
  • ex.제목을 나타낼땐 h1 태그

- 왜 쓰나요?

1. SEO ⇒ 적절한 제목, 부제목, 시맨틱 태그를 통해 검색엔진 최적화가 가능하다.

2. Accessibility ⇒ 웹 접근성에 도움을 준다. / 스크린리더

3. For us, Maintainability ⇒ 가독성 측면에서 도움을 준다.

---

• header
  • 웹사이트에 브랜드를 나타낼 수 있는 로고, 사용자들을 위한 중요한 메뉴 아이템이 들어있을경우 사용
  • 여러가지 메뉴가 모여있다면 nav를 사용하는 것이 좋음
• footer
  • 웹 사이트 제일 아래에 부가적인 정보나 링크가 들어있을 경우 사용
• main
  • => 현재 페이지에서 중요한 컨텐츠를 가지고 있는 부분
  • article
  • section
  • aside
    • 페이지의 컨텐츠와 직접적으로 상관이 없는 부가적인 내용이 담겨있는 부분

<main>

        <article> ⇒ 블로그 포스트에서 포스트 하나 그 자체를 묶어줄 때 사용

         이 자체만으로 독립적으로 다른 페이지에 보여줄 때 전혀 문제가 없을 때 사용

         독립적으로 고유한 정보를 나타낼 때 사용

       <section> ⇒ 서로 연관있는 내용을 하나로 묶어줄 때 사용

        한 페이지 안에 여러가지 페이지가 보여준다면 article로 묶고, section으로 그 안에서 나눠 사용

</main>

---

비슷한 태그별 차이!

• <i> vs <em>
  • <i> 시각적으로만 이탤릭체
  • <em> 강조하는 이탤릭체 ⇒ 스크린 리더로 재생 시 강조!
• <b> vs <strong>
  • <b> 시각적으로만 볼드체
  • <strong> 정말 중요한 곳에 쓰는 볼드체!!
• 목록 태그 <ol> vs <ul> vs <dl>
  • <ul> : unorder list
    • 순서가 없는 리스트, 단순 목록화
    • <li>
  • <ol> : order list
    • 순서가 있는 리스트
  • <dl> : 어떤 한 문장, 단어에 대한 정의나 설명이 묶여있을 떄 그 목록을 나타낼때 사용
    • <dt> : 내가 원하는 단어
    • <dd> : 그에 해당하는 단어
• <img> vs background-image
  • <img> : 웹 페이지 안에 하나의 중요한 요소로 자리를 잡고있을 때 사용
  • background-image: 이미지 태그가 문서의 내용과는 별개일 때 (문서의 일부분이 아닌 경우에) 사용!
• <button> vs <a>
  • button: 사용자의 특정한 행동이 발생하는 경우 사용
  • a: 클릭 시 다른 페이지, 지정된 링크로 이동 시 사용
• <table> vs CSS
  • table: (행 + 열) 데이터를 나타낼 때
  • CSS: Flex, Grid
• 더 많은 정보
  • HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN (mozilla.org)

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

참고: https://youtu.be/OoA70D2TE0A