< Code diaries />

TAG 01 - 영역을 분리하는 태그(Semantic Tags) 본문

Html

TAG 01 - 영역을 분리하는 태그(Semantic Tags)

ejey 2024. 6. 6. 22:16

 

HTML(Hyper Text Markup Language)

 

 

 

<body> 안에 마크업 할 수 있는 HTML TAG 종류중 Semantic Tag들에 대하여 알아봅시다~!

 

시멘틱 태그란 내용에 의미를 부여할 수 있는 태그들이며, 그중 HTML5에서 새로 정의된 태그들에 대하여 시멘틱 태그라고 합니다. 하지만, 새로 나온 태그가 아니어도 의미가 담겨있는 <h1>태그 등 100여가지를 모두 시멘틱 태그로 분류하고 있습니다.

https://developer.mozilla.org/ko/docs/Glossary/Semantics

 

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다. 예를 들어, ("이게 어떻게 시각적으로 보여질까?" 보다는), 이 Javascript 라인을 실행하는 것은 어떤 효과가 있나요?", 혹은 "이 HTML 엘

developer.mozilla.org

 

 

 

 

01.  영역의 의미를 정의하는 태그목록

Tag Description Meaning
<header> 머릿말 태그로,
<body>태그의 child element일때에는 문서의 머릿말 역할로써,
로고, 메뉴등을 넣어 문서의 헤더영역을 나타낸다.

하지만, <section> 태그에 넣으면, 그영역의 머릿말로 해석될 수 있으며,
<footer> 태그에 넣을 수 없다.

적어도 하나의 헤딩요소 사용을 권장한다.		  
<main> 문서의 메인영역을 나타내는 태그로써, 한 문서에 한번만 사용할 수 있다.
구 브라우저대응을 위해 role = "main" 속성을같이 사용하는 것이 좋다.		  
<footer> 꼬릿말 태그로, 
<body> 태그의 child element일때에는 문서의 꼬릿말 역할로써,
copyright정보 address등을 넣어 저작권자의 정보를 넣어준다.

또한, <nav>태그도 내부에 들어올 수 있다.
<section>태그에 넣을경우, 그 영역의 꼬릿말로 해석될 수있으며,
<header> 태그에 넣을 수 없다.		  
<section> 의미론적으로 영역을 구분할 때 사용한다.
적어도 하나의 헤딩요소 사용을 권장한다.		  
<article> 제목과 내용이 있는 하나의 기사영역과 같은 의미로 사용되고,
보통 <section>보다 작은 개념이지만, 
상황에 따라 내부에 <section>이 들어와도 상관없다.
적어도 하나의 헤딩요소 사용을 권장한다.		  
<nav> 문서의 주요메뉴 링크를 넣는 영역이며,
내부에 보통 목록태그와 같이 사용한다.		 Navigation
<aside> 작성하고 있는 문서의 내용과 상관없는 영역을 묶는다.
(배너, 퀵메뉴 등)		  
<figure> 그래프, 표, 이미지등을 묶는 용도로 사용한다.  
<figcaption> <figure>태그의 첫번째, 또는 마지막 child element로만 사용되며,
단독으로 사용할 수 없다.		  

 

* 시멘틱 요소로 마크업을 했을 때의 이점을 알아보자.

1. 검색엔진이 시멘틱요소의 마크업을 페이지의 검색순위에 영향을 줄 수 있는 중요한 키워드로 간주하게 된다.

2. 시각장애가 있는 사용자가 Screen Reader 기로 접근할 때에 접근성을 높여 안내해 준다.

3. 시멘틱요소로 코드블럭을 찾는 것이 훨씬 수월하다.

 

 

 

Section 태그와 Article 태그의 정의

특징 <section> <article>
의미 주제에 따라 콘텐츠를 나누는 섹션 독립적으로 배포 가능한 콘텐츠 단위
독립성 독립적으로 존재할 필요 없음 독립적으로 존재할 수 있음
구성 요소 제목과 관련된 콘텐츠를 포함 독립적인 제목 및 내용을 포함
사용 예 페이지 내의 다양한 주제를 나누고자 할 때 블로그 포스트, 뉴스 기사, 포럼 게시물 등

 

02. 사이트 분석 : 네이버 홈화면의 영역은 어떻게 분리 되었는지 살펴보자(2024년 6월기준)

( www.naver.com )

 

 

시멘틱 태그를 사용하지는 않았지만, #wrap안에 header, container, footer라는 아이디로 나누어 3개의 영역으로 분리했다는 것을 알수 있다.

 

 

[ 먼저, header로 나눈 부분 ]

 

 

 

 

 

[ footer로 나눈 부분 ]

 

 

 

 

 

03. SKsignet - US 반응형 사이트
( www.sksignet.us  )

 

상단부분에 <header>태그를 쓰거나, 명칭하지는 않았지만 메뉴부분에 <nav> 시멘틱 태그를 사용하고, 주요 메뉴를 <ul>태그로 작성한 것을 볼 수 있다.

 

 

또한, 본문 전체를 <main>태그로 묶고, 각 영역을 <section> 태그로 관리하고 있다는 것을 알 수 있다.

 

 

하단의 저작권자 정보 및 약관이 들어간 부분을 <footer>로 마크업 한 것도 볼 수 있다.

Footer 영역

 

 

 

 

04. 롯데타워 홈페이지

( www.ltw.co.kr  )

<header> 영역

위의 영역을 <header> 태그로 마크업 하였다.

 

 

<Footer> 영역

 

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

반응형
저작자표시 비영리 변경금지

'Html' 카테고리의 다른 글

TAG 04 - 표를 만드는 태그  (0) 2024.06.06
TAG 02 - 제목과 글자를 다루는 태그, 기타 태그  (4) 2024.06.06
우리가 공부할 HTML tag list  (0) 2024.06.06
HTML Markup 방법과 DOM 트리구조  (2) 2024.06.06
HTML - 무엇인지 스치듯이 알아봅시다~!  (2) 2024.06.06
'Html' Related Articles more