html 시맨틱 요소로 작성하기(feat. inline요소)

 퍼블리싱 수업을 받을 때 '시맨틱적이지 않아요.' 라는 리뷰를 받은 적이 있었다. 그 때의 나는 위의 그림과 달리 모든 요소들을 div 요소로 작성했었고 내 생각과 같은 결과물이 나왔기 때문에 이게 뭐가 문제지? 라는 생각을 했었다. 왜 html 요소를 시맨틱적으로 작성하라고 하는걸까?

시맨틱 태크란? 각 태그 요소에 의미가 부여된 이름이 있는 것이라고 생각하면 된다.

앞서 이야기 했듯이 위의 요소들을 모두 div 요소로 바꾼다고 해서 결과가 달라지거나 에러가 나지 않는다. 그런데 왜 시맨틱적으로 작성을 해야될까? html5에서 적용된 이유를 살펴보면 된다.

① 태그를 시맨틱적으로 작성한다면 흐름을 이해하기가 편하다. 즉, header 다음 main 다음 footer 라는 기본적인 흐름 안에서 작성이 된다는 것이다. 즉 태그만으로도 어느정도 화면에서 어디에 위치하는 태그인지 어떤 역할을 하는지에 대한 이해가 가능하다. 이 점은 협업이나 유지보수 과정에서 이점이 된다.
② 본문을 article과 section으로 작성을 한다면 검색엔진에서 받아들이는 의미가 각각 다르다. article은 재 배포될 수 있는 컨텐츠로, section은 재 배포를 금지하는 콘텐츠로 인식한다.

 

 퍼블리싱 수업 초반에 가장 신경을 많이 썼던 부분이 inline요소와 block요소였다.
block요소는 자신의 줄을 margin을 통해 다 채워버리고 inline요소는 주변 친구들과 잘 어울릴 수 있는 친구라는 차이가 있다. 그래서 가장 좋았던 것은 inline-block으로 바꾸면 만사OK..ㅎㅎ