https://developer.mozilla.org/ko/
tag를 학습할 때는 mdn 문서를 참고하는 것이 도움됨!
예제도 나와있어서 이해하기 좋음.
컨테이너 <div>, <span>
div와 span 태그의 경우,
사실 아무 의미가 없다.
그냥 컨테이너 역할을 할 뿐임.
+CSS로 디자인을 입혀야 눈에 보인다.
div는 블록 요소이며
특정 구역, 구획을 분할하는 역할.
반면 span은 인라인 요소이며
div와 마찬가지로 순수 컨테이너임.
가로 전체를 차지하는 div, 콘텐츠 영역만큼 차지하는 span.
시맨틱 웹(semantic web)
↑ 주석이 없다면, 아무 의미도 없는 코드.
그래서 의미를 가지는 '시맨틱 태그'를 활용하는 것이 좋음.
이처럼 각 의미를 담는 태그를 사용하기.
시맨틱 태그 장점
-
검색 엔진에 중요 키워드로 노출될 수 있음
-
스크린리더 사용자의 웹 접근성 ↑
<header>, <footer>
MDN 사이트의 header.
header는 소개 및 탐색에 도움을 준다.
ex) 제목, 로고, 검색 폼, 작성자 이름...
MDN 사이트의 footer.
footer는 사이트 하단에 보이는 저작권 정보... 등에 관한 인포를 제공.
주의사항
-
header 내에 header, footer 올 수 x.
-
footer 내에 header, footer 올 수 x.
<nav>
MDN 사이트의 nav.
nav 태그는 현재 페이지, 또다른 페이지로의 링크를 보여주는 구획이다.
(물론 한 페이지 내의 이동도 가능)
ex) 메뉴, 목차, 인덱스...
<aside>
aside는 문서의 주요 내용과 간접적으로 연관된 부분을 구획한다.
해당 콘텐츠로부터 분리 가능.
ex) 광고, 링크... 사이드바
<article>
article 태그는 독립적이며
배포, 재사용이 가능하다.
+기사만 딱 떼와도 이해가 가능해야 함.
ex) 게시판, 블로그 글, 뉴스 기사...
<section>
article 태그의 경우,
그 부분만 떼어가도 이해가 가능했음.
But, section의 경우,
단독적 콘텐츠가 될 수는 x.
++ 웹페이지에서 관련 있는 내용 영역을 구분!
정리.
