HTML 시맨틱 태그, 중요한 태그들 모음
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/HTML/Element
Semantic Tags
(Semantic markup) 시맨틱 태그
1. SEO : 검색을 최적화 하기 위해서. 이런 키워드를 검색했을 때 이 웹사이트를 추천해줘야겠다고 알수있다.
2. Accessibility: 웹 접근성 때문. 웹 페이지를 음성으로 읽어주는 스크린 리더를 이용하거나 키보드를 이용할 경우에도 문제없이 잘 동작할 수 있어야한다.
3. Maintainability: 개발자들을 위해서, 구조와 유지보수성을 높여서 개발 할 수 있다.
의미가 있는 시맨틱 태그를 적절히 잘 사용하는 것이 중요하다.
<article> vs <section>
article 태그는 HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 자체만으로 독립적으로 다른 페이지에 보여줬을 때 사용한다.
section 태그는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때, 아티클 안에 많은 내용이 들어있는데 서로 연관있는 내용을 하나로 묶어줄 때 섹션을 사용한다.
<i> vs <em>
i 태그는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 시각적으로 이탤릭체로 나타내고 싶을 때 사용한다.
em 태그는 강조하는 이탤릭체 요소는 텍스트의 강세를 나타내고 싶을 때 사용한다.
<b> vs <strong>
b 태그는 시각적으로만 볼드체로 나타낼 때,
strong 태그는 정말 중요,중대하거나 긴급한 콘텐츠를 나타낼 때 볼드체로 나타낸다.
<ol> vs <ul> vs <dl>
ol 태그는 순서가 중요해서 보통 숫자 목록으로 표현한다.
ul태그는 순서가 없고 단순히 목록화 되는 것으로 보여주고 싶을 때 사용하며 보통 불릿으로 표현한다.
dl 태그는 설명 목록을 나타낸다. <dl>은 정의, 설명 단어에 대한 설명이 묶여있는 경우에 사용하며
dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성한다.
<button> vs <a>
button태그는 클릭 가능한 버튼을 나타내고 특정한 액션이 발생하는 경우 사용한다.
a 태그는 페이지에서 어딘가로 이동할 때 href 특성을 통해
다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
<table> vs <css>
table 태그는 행과 열로 이루어진 표를 나타냄.
css Flex, Grid로 스타일링 할 수 있다.
데이터 문서 안에서 자체적으로 의미있는 태그가 필요한 건지 점검해야한다.