CHAPTER3> div와 span태그의 차이, 시맨틱 태그

오늘은 공간 분할 태그인 div와 span의 차이,시맨틱 태그에 대해 알아볼 예정이다.

 

div와 span 차이는?

 

div태그는 페이지를 논리적인 구역으로 분리하는데 사용되며, 블록 요소이다. HTML요소들을 묶는 컨테이너로 사용된다.

div자체적으로 특별한 의미는 없으며, 블록요소이기 때문에 하나의 줄을 전부 차지 한다.

span태그는 인라인 요소로 텍스트를 위한 컨테이너로 사용할 수 있다. 인라인 요소는 콘텐츠의 크기만 공간을 차지하는 요소

이다. span태그도 특별한 의미는 없으며 CSS와 함께 사용되어 텍스트 일부의 스타일 속성을 설정할 때 사용된다.

시맨틱 태그란 ?

semantic의 사전적 의미는 의미론적인으로 의미가 있는 태그이다.

시맨틱 태그 이점

• 검색엔진 최적화 - 검색했을 때 내가 만든 웹페이지가 상단에 위치한다

• 웹 접근성 향상

• 가독성 향상 

의미론적 요소들

• header - 문서의 머리말

• nav - 내비게이션 링크

• section - 문서의 섹션

• article - 문서의 내용이나 블로그의 포스트

• aside - 사이드바와 같이 옆에 위치한 내용 

• footer- 문서의 꼬리말