[PoiemaWeb]HTML 기본 문법, 시멘틱 요소

1.요소 (Element)

• HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 content로 구성된다.

HTML 요소

  1.1 빈 요소(Empty Element)

      빈 요소 중 대표적인 요소

• br 
• hr 
• img
• input
• link
• meta

2.어트리뷰트 (Attribute)

• 어트리뷰트(속성)란 요소의 성질, 특징을 정의하는 명세이다.
• 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보를 제공한다.
• 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

HTML Attribute

  2.1 글로벌 어트리뷰트

• 글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.

Atrribute	Description
id	유일한 식별자를 요소에 지정한다. 중복 지정 불가능
class	스타일시트에 정의된 class를 요소에 지정한다. 중복 지정 가능
hidden	css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang	지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언러를 인식할 수 있게 한다.
style	요소에 인라인 스타일을 지정한다.
tabindex	사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
title	요소에 관한 제목을 지정한다.

 

3. 시맨틱 웹(Semantic Web)

• 시맨틱 웹이란 웹에 존재하는 수만은 웹페이즈들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
• 검색엔진은 로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(크롤링)
• 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다(인덱싱)
• 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다.
  즉, 검색 엔진은  HTMl 코드 만으로 그 의미를 인지하여야 하는데 이 때 시맨틱 요소를 해석하게 된다.
• 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확인 설명하는 역할을 한다.

  non-semantic 요소

    div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않다.

  semantci 요소

    form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

 

 

  HTML5에 새롭게 추가된 시맨틱 태그

tag	Description
header	헤더를 의미
nav	내비게이션을 의미
aside	사이드에 위치하는 공간을 의미
section	본문의 여러 내용(article)을 포함하는 공간을 의미
article	본문의 주내용이 들어가는 공간을 의미
footer	푸터를 의미

 

HTML Semantic element