[HTML]<div>와 시맨틱 웹

시맨틱 웹은 브라우저가 이해할수 있도록 웹콘텐츠의 구분을 해주는 것이다.

시맨틱 웹을 이해할때 <div>가 있는데 왜 굳이 다른게 필요한지 몰랐다.

<div>도 단락을 구분해주는 기능을 갖고있기 때문이다.

하지만 레이아웃을 하나 만들어보고 나니 이제 시멘틱 웹을 쓰는 이유를 알것같다.

모든 단락을 <div>로 했더니 뭐가 뭔지 구분할 수가 없었다....

<div>로 단락 구분을 하면 어떤 단락을 구분할때 <div>로밖에 지칭할 수 없지만

다른 웹페이지 구조 관련 태그들을 쓰면 지칭하기 편하고 가독성이 좋다는 장점이 있었다!

<웹페이지 구조 관련 태그들>

<header> : 머리말을 나타내는 태그

<hgroup> : 제목과 부제목을 묶는 태그

<nav> : 메뉴 부분을 나타내는 태그

<section> : 제목별로 나눌 수 있는 태그

<article> : 개별 콘텐츠를 나타내는 태그

<aside> : 왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그

<footer> : 하단의 정보를 표시하는 태그

사용예

<body>
<section>
<h1>영화 제목1</h1>
<p>첫번째 영화 내용입니다.</p>
</section>
</body>

코딩딩 블로그