시멘틱 태그란(Semantic Tag)?

시맨틱 태그 : 의미, 의미론적인 뜻을 가진, 즉 의미를 가진 태그입니다. HTML5에서 처음 등장했고 시맨틱 태그의 등장으로 인해 우리는 태그만 봐도 문서를 더 쉽게 이해할 수 있게 되었습니다.

Example)

<header></header>

<main></main>

<section></section>

<article></article>

<aside></aside>

<footer></footer>

<hgroup></hgroup>

<nav></nav>

이 시멘틱 태그입니다.

사용하는 이유 :

웹페이지의 레이아웃을 만들거나 기획할때 div태그로도 충분히 다 만들 수 있지만 위의 예시들을 사용하는 이유는 주로 3가지 입니다

1. 웹브라우저의 검색 엔진 :
   검색엔진 사용 시에 알맞은 검색결과를 내기 위해 시멘틱 태그를 사용하면 정확한 분석을 할 수 있도록 도와줍니다.
2. 유지보수 :
   보수를 할 때 어떤 부분에 문제가 있는지 쉽게 알기 쉬워져 유지보수에 도움을 줍니다.
3. 소스코드 구조화 : 어떤 영역인지, 어떤 파트인지 나눌 수 있게 되었기에 div를 무수히 많이 쓰는 것보다 훨씬 큰 도움을 줍니다.
4. 가독성 : 2,3번과 관련이 있는데 이 역시 어떤 부분인지 쉽게 나눠져있기에 사용자나 개발자가 쉽게 읽을 수 있는 코드가 됩니다.

2. 웹 표준?

웹 표준이란 웹에서 표준적으로 사용되는 규칙이나 기술을 의미하고 다른 종류의 웹이나 운영체제 내에서도 동일하게 보이고 정상 작동하는 것을 의미합니다.

왜 지켜야하죠?

웹표준을 지켜야하는 이유는 다른 블로그에서 찾아봤을 때 만화로 쉽게 이해할 수 있게 해줘서 저도 그 사이트를 올리려합니다. 들어가서 보시면 쉽게 이해가 되실 거에요!!

웹 표준 사용 만화

요약하시거나 쇼츠를 좋아하시는 분들을 위해서 저도 요약을 해서 올려드리자면

1. 웹브라우저들 내에서 호환이 가능하다.
2. 접근성의 향상
3. 효율적인 마크업이 가능하다.
4. 효율적인 코드를 통해 저장 공간의 활용이 가능하다.
5. 코드의 통일로 수정 및 운영관리가 용이하다
   등이 있습니다.!!

이상으로 이번 블로그를 마치고 만약 더 공부하고 싶으신 분들은 모질라나, 저 외의 수많은 블로그를 참조하시는게 좋을 것 같습니다.!!