[HTML+CSS][HTML5와 시맨틱태그] 01 - HTML5 문서

 

 

[HTML+CSS][CSS 레이아웃] 03 - 표 스타일

 

HTML5에서 사용되는

시맨틱 태그에 대해서 간단하게 알아보고

시맨틱 태그를 사용해야 하는 이유에 대해서 알아보도록 하자.

 

 

---

 

 

시맨틱 태그 (semantic tag)

 

HTML5에서 태그 이름만 보고도 

문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있게 하는 것이다.

 

 

- 시맨틱 태그로 레이아웃을 제작해야 하는 이유 -

웬 문서에 레이아웃을 만들 때 

시맨틱 태그를 사용하지 않더라도 웹 문서를 만들 수 있고
시맨틱 태그를 사용하거나 사용하지 않거나 웹 브라우저에 나타나는 모습은 똑같다.

하지만 시맨틱 태그를 사용했을 경우, 

어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있다.

또한 태그에 대한 역할이 정확히 정해졌기 때문에 

어떤 장치에서든 문서를 똑같이 해석할 수 있다.

 

 

 

 

---

 

 

기존에 배운 태그로만 웹을 제작하면

제작하는 과정에서 구분 짓기 힘들고

결과는 제대로 나오지만

나중에 수정하기가 불편한데

시맨틱 태그를 이용해

웹을 제작하게 된다면

훨씬 수월할 것 같다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※