Semantic Tag

honeysuckle·2020년 3월 18일
0

시맨틱이란

HTML5는 HTML4의 태그를 그대로 사용하면서도 '시맨틱 태그'가 더 추가되었습니다.
태그 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 것을 '시맨틱' 하다라고 합니다.
div 대신 header, nav 처럼 각 역할에 맞는 태그들이 사용되어 지고 있습니다.

왜 시맨틱 태그로 레이아웃을 만들어야 할까?

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

하지만 브라우저에서 문서를 처리할 떄는 매우 큰 차이가 있습니다.

소스만으로도 문서 내용을 알 수 있으면 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리합니다.

'어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편이 있어서는 안된다'

웹접근성 시각에서 볼때도 시맨틱 태그는 매우 중요합니다.

시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 웹 보조 기구를 이용하는데 이때 시맨틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있으므로 정확히 전달할 수 있기 때문입니다.

시맨틱 태그

header 태그는 특정 부분의 머리말에 해당합니다.
사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입합니다.
header 태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수도 있습니다.

사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다.
nav 태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.
위치의 영향을 받지 않아 모든 태그안에 포함될수 있고 독립해 사용할 수도 있습니다.
문서안에 여러개의 nav를 사용할 경우, id를 지정해 주면 각 내비게이션에 맞게 스타일을 지정할 수 있습니다.

section

문서에서 콘텐츠 영역을 나타냅니다.
문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 h1~h6 제목 태그가 함께 사용됩니다.
section 태그내에 또다른 section 태그를 넣을 수도 있습니다.

article

section 태그와 비슷해 혼동하기 쉬운 article 태그는 웹 상의 실제 내용을 넣습니다.
보통 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당됩니다.
section 태그는 문맥 흐름중에서 콘텐츠를 주제별로 묶을 때 사용합니다.
article 태그 안에 section 태그를 넣을 수도 있습니다.

aside

사이드바를 만드는 태그가 aside 입니다.
필수 요소가 아니므로 광고, 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용합니다.

iframe

웹 문서 안에 다른 외부 문서를 삽입 할때 사용합니다.
인라인 프레임 이라고 합니다.
인라인 프레임을 삽입하는 태그가 iframe 태그입니다.

<iframe src='https://www.example123.com'></iframe>

속성

  • width
  • height
  • name
  • src
  • seamless ( chrome, safari only )

웹 문서 끝자락에 들어가는 footer 태그는 사이트 제작자 연락처, 저작권 정보를 표시합니다.
footer 태그안에는 header, section, article등 다른 레이아웃 태그를 모두 사용할 수 있고 다양한 정보를 넣을 수 있습니다.

address

주로 footer 태그 안에 제작자의 이름, 웹페이지, 피드백을 위한 연락처 정보를 넣는데 사용됩니다.
단순 우편주소를 표기할 용도라면 address가 아닌 p를 사용합니다.

div

div 는 언제 사용할까
div는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때(css) 사용합니다.

browser 점유율 ( 2020 1q 기준 )

  1. Global (Desktop)

  2. Global (Mobile)

  3. Korea (Desktop)

  4. Korea (Mobile)

https://gs.statcounter.com/
HTML + CSS3 웹 표준의 정석 10장
https://caniuse.com/

0개의 댓글