body 태그

앞에서는 head 에 들어가는 태그에 대해서 글을 썼고, 이제는 body에 들어가는 태그에 대해 정리해야 한다.

body에 들어가는 태그는 head와 다르게 실제로 화면을 구성하는 요소가 주가 된다. head에 들어가는 태그는 대부분 문서의 전체적인 정보를 알려주는 요소가 들어갔었다.

div

division을 의미하며, 화면을 구성하는 아무런 의미가 없는 태그이다. 때문에, 많이 사용하면, SEO 점수를 많이 잃을 수 있으며, 의미론적으로도 불리한 태그이다.

p(paragraph)

문단을 구성할 때 쓰는 태그이다. 일반적으로 글만 들어가는 부분에서 사용함.

pre

텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음. p 태그의 경우 띄어쓰기를 여러개 하거나, 엔터가 먹지 않는데, pre는 그대로 구성이 가능

header

페이지의 맨 윗부분을 담는 곳이라는 의미를 가지고 있다. 일반적으로 로고, 로그인 등의 버튼을 담는 부분이고, navigation 등을 담아서 웹페이지의 여러 곳으로 링크를 탈 수 있게 만들어주는 부분도 포함할 수 있다.

nav

네비게이션을 의미하며, 일반적으로 웹페이지의 여러 페이지로 이동할 수 있도록 도와주는 부분이다.

ol, ul, li

nav 내에서만 사용되는 태그는 아니고 list를 만들어주는 태그이다. 하지만 navigation과 궁합이 잘 맞아서, 네비게이션 내에서 많이 사용하며, 다양한 링크를 리스트로 만드는 역할을 한다.

ol(ordered list) 과 ul(unordered list) 의 차이는 순서가 있나 없나이다.

h1

h1 을 로고로 만들고 내부에 로고 이미지를 넣어 명확하게 해당 로고가 페이지의 시작하는 부분을 명시할 수 있다. (미세 팁)

Main

페이지의 메인 부분을 나타내는 부분

h2 ~ h6

프로젝트를 할 때 위 태그들을 사용할 방법을 전혀 생각을 안했었는데, 굳이 내용을 넣지 않아도, 혹은 display:none 으로 숨기더라도, 이 태그들을 사용해주는 것이 좋다는 생각을 했다. 이 태그를 사용하면 현재 이 태그가 사용되고 있는 컨텐츠가 홈페이지 구성자에게 몇번째 순위로서 인식되고 있는지, 해당 html 브라우저 및 SEO 엔진에게 명확하게 전달할 수 있겠다는 생각이 들었다.

article

페이지의 레이아웃을 구성하지만, 특정 의미를 담아야 하는 태그이다. 내 생각에는 article의 의미를 담기 위해 사용할 태그가 h 태그라고 생각한다. 내가 생각하는 의미의 단위가 아니라 명확하게 엔진이 인지할 수 있는 의미를 넣어주어야 article로서의 역할이 가능하다.

section

위에서 의미가 있는 레이아웃 구성단위를 article이라고 했는데, section은 의미가 없는 레이아웃 구성단위를 의미한다. main 을 구성하다보면 의미가 없는 박스를 레이아웃 구성을 위해 사용해야 하는 일이 빈번하게 있다. 이런 부분들을 div 대신 사용할 수 있도록 만든 태그가 section이다.

aside

옆에 광고를 넣을 때 사용하는 태그이다.

footer

푸터는 일반적으로 웹페이지를 만든 주체의 대한 정보가 들어가는 부분이다.

address

특히 연락처(이메일, 전화번호) 등을 기입하는데 사용하는 태그이다.