해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
HTML lesson 2, 3의 내용인 기본 문법, 시맨틱 요소에 대해 알아보겠습니다.
1. HTML5 Introduction & Syntax
HTML5
HTML5(HyperText Markup Language)은 웹 페이지를 기술하기 위한 마크업 언어입니다.
- 마크업 언어? 태그 등을 이용해 문서나 데이터의 구조를 명기하는 언어
웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화 합니다.
HTML5 문서는 반드시 <!DOCTYPE html>
으로 시작하며, <html>
과 </html>
사이에 기술합니다.
<head>
와 </head>
사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하고, 브라우저에 표시되지 않습니다.
웹 브라우저에 출력되는 모든 요소는 <body>
와 </body>
사이에 위치합니다.
다음은 HTML5의 기본 문법에 대해 알아보겠습니다.
HTML5의 기본 문법
요소(Element)
요소는 시작 태그(start tag)와 종료 태그(end tag), 태그 사이에 위치한 content로 구성됩니다.
<p>Hello world</p>
<!-- <p></p>는 태그, Hello world는 content에 해당 -->
태그는 대소문자를 구별하지 않으나 소문자를 사용하는 것이 일반적 입니다.
이런 요소들은 중첩될 수 있습니다. 이 때 시각적으로 파악하기 쉽게 indent(들여쓰기)를 활용합니다.
반면, content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라 합니다. content가 없으며 어트리뷰트(Attribute)만을 가질 수 있습니다.
대표적으로는 br
, hr
, img
, input
, link
, meta
가 있습니다.
어트리뷰트(Attribute)
어트리뷰트는 요소의 성질, 특징을 정의하는 명세입니다.
요소에 추가적인 정보(이미지 파일의 경로, 크기)를 제공합니다.
시작 태그에 위치하며 이름과 값의 쌍을 이룹니다.
<img src="hi.jpg" width="100" height="100">
모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트인 글로벌 어트리뷰트도 있습니다.
자주 사용되는 글로벌 어트리뷰트는 다음과 같습니다.
id
, class
, hidden
, lang
, style
, tabindex
, title
2. 시맨틱 요소와 검색 엔진
시맨틱 웹(Semantic Web)
검색 엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹 사이트 정보를 수집합니다. (⇒ 크롤링 - 검색 엔진의 크롤러가 수행)
키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둡니다. (⇒ 인덱싱 - 검색 엔진의 인덱서가 수행)
검색엔진이 이러한 인덱스를 생성할 때 사용하는 정보가 수집한 웹사이트의 HTML 코드입니다.
이 때 검색 엔진은 시맨틱 요소(Semantic element)를 해석하게 됩니다.
시맨틱 요소로 구성되어 있는 웹 페이지는 검색엔진에 보다 의미론적으로 전달할 수 있으며 효과적으로 크롤링과 인덱싱이 가능해졌습니다.
시맨틱 태그는 컨텐츠의 의미를 명확하게 설명하는 역할을 합니다.
이 태그에 의해 컴퓨터가 명확히 해석하고, 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있습니다.
시맨틱 웹이란 웹페이지들에 메타데이터를 부여하여 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상을 뜻합니다.
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있습니다.
non-semantic 요소
div
,span
: content에 대해 설명 X
semantic 요소
form
,table
,img
: content의 의미를 명확하게 설명함
새롭게 추가된 시맨틱 태그는 다음과 같습니다.
header
, nav
, aside
, section
, article
, footer
여기까지 HTML의 기본 문법과 시맨틱 웹에 대해서 알아보았습니다.
다음 게시물에서는 HTML의 기본 태그들에 대해서 알아보겠습니다.