웹(Web)/HTML5

2. 시멘틱 태그

도솔비 2020. 5. 3. 20:36

시멘틱 태그

시멘틱(semantiv: 의미가 통하는) 요소(element)는 레이아웃을 구분하는 태그로,

이를 사용해서 웹사이트의 구조를 나눌 수 있으며, 그 각각의 주요 태그가 표준화 돼있다.


(물론 <body>와 </body>안에 들어가며, 문서의 기초 레이아웃을 나눈다.)

(예전 html4에서는 <div>태그를 이용해서 id속성으로 header, content, footer등을 구분해 구조를 짰지만, 시멘틱 태그를 이용하면 더 낫다.)

image

  • <header> 태그 : 머리말, 제목

: 문서레이아웃에서 제목부분을 차지하거나, <article>같은 다른 시멘틱 태그안에서 제목부분으로 사용될 수 있다.

(<head> != <header>)

  • <nav> 태그 : 내비게이션 링크(문서 연결)

: 문서를 사이트간에 연결하는 링크부분, 네이게이션이라고 함.

주로 메뉴로 사용되며, 독립해서든 시멘틱태그 안에 포함되는 위치 영향을 받지 않고 사용된다.

  • <iframe> 태그 : 외부 문서 삽입

: 말그대로 inline frame(인라인 프레임)이라는 뜻으로, 웹문서안에서 다른 웹문서를 표시할때 사용

<iframe src="삽입할외부문서의주소"></iframe>

추가로 다른 <iframe>의 속성에는,

   
속성명 설명
width 너비(px)
height 높이(px)
name 이름
seamless 테두리 없에기(속성값 없이 사용)

가 있다.

  • <section> 태그 : 콘텐츠 영역

: <header>, <footer>처럼 콘텐츠 영역에 대해서 구분지어주는 태그.

독립해서, 시멘틱태그 안에서, 아니면 <section>태그 안에 중첩되서, <article>태그 안에서도 사용될 수 있다.

<article>태그와 비슷한데, <section>는 콘텐츠 내용을 분류해주는 역할(기능상 구분)만 하지, 실제 내용은 <article>태그에서 들어간다.

  • <article> 태그 : 실제 콘텐츠 내용

: 레이아웃상의 분류(기능상 구분)가 아니라, 실제 내용의 콘텐츠(내용상의 구분)가 들어있는 태그.

실질적인 내용이나 콘텐츠를 묶어서 넣게 된다. <section>과는 다르다.

  • <aside> 태그 : 본문 이외의 내용 (사이드바)

: 광고나 사이드바 같은 본문 이외의 내용을 담고 있는 태그.

왼쪽, 오른쪽이나 하단에 표시되는 기타 내용들이 이에 속함, 필수 요소가 아니기에 필요할 경우만 사용됨.

  • <footer> 태그 : 하단 정보 내용
    • 태그 : 사이트 관련 정보
      태그안에서 주로 쓰이는 태그로, 내용에 웹페이지 제작자 이름, 웹페이지나 이메일 주소(연락처 정보같은 것)들이 들어간다. (대신 우편주소나, 업데이트 날짜는 들어가지 않는다. 그런건

      태그를 이용해서 표시한다.)

  • : 화면 구조의 맨 아래에서 제작정보와 저작권등이 표시되는 영역의 태그.

    레이아웃상의 구분을 지어주는 태그기에, 이안에서도 <section>, <article>같은 레이아웃 태그를 사용할 수 있다.
  • <div> 태그는?

div태그는 html5에서도 중요하게 사용됨, 콘텐츠를 묶어서 스타일(CSS)이나 스크립트등을 적용시킬때 요긴함.


웹브라우저 버전을 고려

오래된 버전에서는 지원하지 않으니 고려해서 사용할 것,

자세한 내용은 HTML5 shiv 사용법을 참고.