[자바스크립트] 시맨틱태그

자바스크립트가 뭔가 만들고나면 제일 보람찬 것 같다.

 

 

[자바스크립트] 시맨틱 태그 조사

                        

 

1. 시맨틱 태그의 정의

 

시맨틱태그 (semantic tag)는 HTML5부터 추가된 태그로, 본문 속의 각 단락에 의미를 부여 할 수 있는 태그이다. 쉽게 말하면 시맨틱 태그는 그냥 영역을 구분짓는 태그를 말하는 것이다.

 

 

 

 여기서 시맨틱(semantic)이란 컴퓨터가 정보를 이해하고 논리적인 추론까지 할 수 있는 것을 의미한다. 즉 컴퓨터가 사람이 이해하는 것처럼 태그를 이해 할 수 있도록 지원해주는 것을 시맨틱 태그라고 말 할 수 있다.

 

 

 

2. 시맨틱 태그의 장점

 

1) HTML5에서 추가된 시맨틱태그를 쓰면 HTML4보다 영역을 알아보기 쉬워서,구조파악이 쉬운 웹페이지를 만들 수 있다.

 

 

 

2) 작성한 페이지내의 소스코드를 분석하거나 검색엔진이 페이지를 검색 할 때, 의미있는 구간의 데이터를 사용해서 더 정확한 검색을 할 수 있다.

 

 

 

3) 웹페이지 내에서 시맨틱 태그를 사용하면 수정 및 스타일 적용이 수월하며 영역별 css적용이 가능하다.

 

 

 

3. 시맨틱 태그의 구조 및 분류

 

                  

          

​시멘틱태그의 분류

<w:wrap type="square" />

1. <header>태그: 머리말(제목) 지정

 

2. <nav>태그 -문서를 연결하는 네비게이션 링크

 

3. <section>태그 -콘텐츠 영역

 

4. <article>태그- 실제 콘텐츠 내용,<section>태그 안에 위치

 

5. <aside> 태그 - 본문이외의 내용 표시

 

6. <footer> 태그 - 제작 정보와 저작권 정보 표시

 

7. <address> 태그 - 사이트제작자 정보, 연락처 정보, 보통 <footer> 태그안에 사용

 

8. <div> 태그 - 주로 콘텐츠를 묶어 시각적인 효과를 적용할 때 사용

 

9.<iframe>태그 - 외부 문서를 삽입하여 한페이지에 또 다른창을 띄울 때 사용

 

 

 

4. 시맨틱 태그 사용시 주의점

 

아직 html5를 지원하지 않는 브라우저는 시맨틱태그를 인라인으로 취급하기 떄문에 CSS에서

 

display:block;으로 설정해야만 한다.