자 여기 "제목입니다."라는 두 줄의 텍스트가 있습니다.
똑같이 보이죠? 그렇지만 만들어진 방법은 전혀 다릅니다.

1번 <h1>제목입니다.</h1>

2번 <b style="font-size:32px;">제목입니다.</b>

각 각 h1태그와 b태그로 만들어진 코드입니다.

모로 가도 서울로만 가면 되는데 결과만 제대로 나온다고 그날의 기분 따라서
맘에 드는 tag를 쓰면 될까요?

땡! 안됩니다!

코드만으로 내용을 유추할 수 있는 HTML의 Semantic tag를 알아보고 조금 더 의미 있는 마크업을 해보도록 합시다!

Semantics tag

HTML element들 중에서 목적이나 역할을 가진 것들을 Semantic tag라고 합니다. 예를 들어서 우리가 h1태그를 사용할 때 텍스트를 쓰기 위한 것이 아닌 '제가 감싸고 있는 부분이 이 페이지의 최상위 제목입니다'라는 역할과 의미를 내포하고 있는 것이죠. 그러므로 위의 예시에서 제목을 쓰고 싶으면 h1태그를 사용해야 하는 것입니다.

이렇게 semantic tag들로 만들어진 semantic web은 컴퓨터 스스로가 웹에 연결된 정보의 의미를 인식하고 사용자가 필요로 하는 정보를 검색하며 검색된 정보에서 지식을 유추할 수 있는 기능을 제공하게 됩니다.

Semantics tag의 이점

개발자🧑‍💻
-코드의 가독성을 높이고 유지보수를 쉽게한다.
-개발자가 의도한 요소의 의미가 명확히 드러낼 수 있다.

컴퓨터🖥
-검색 엔진은 semantic tag를 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하여 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있다.

사용자🙋‍♀️
-시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.

그러니 지금까지 일반 텍스트로 사용된 h1이 얼마나 억울했을까요?

이제는 제목의 의미를 넣고 싶을 때 h1을 사용해야겠죠?

결론: 난 이제 Semantic tag를 배웠으니 내가 넣고 싶은 데이터를 가장 잘 설명하는 Semantic tag를 사용하여 마크업을 하자!👍