출처

1. HTML5

HyperText Markup Language는 웹페이지를 기술하기 위한 Markup 언어이다.
내용, 구조를 담당하는 언어로 HTML 태그를 통해 정보를 구조화할 수 있다.

HTML5는 2014년 10월 28일에 확정된 차세대 웹 표준이며 아래의 기능이 추가되었다.

기능	설명
멀티미디어	별도의 플러그인 없이 멀티미디어 기능 자체 지원
그래픽	2차원 그래픽(SVG, 캔버스), 3차원 그래픽(CSS, WebGL) 지원
통신	서버와의 소켓 통신 지원으로 서버와의 양방향 통신가능
디바이스 접근	카메라, 동작 센서 등 하드웨어 기능 직접 제어 가능
오프라인 및 저장소	오프라인에서도 애플리케이션 동작 가능(HTML5가 플랫폼 사용될 수 있음 의미)
Semantics 태그	요소의 의미를 담은 태그 도입하여 컨텐츠의 의미를 명확히 설명 이를 통해 요소의 의미를 명확히 해석하여 데이터를 활용할 수 있는 시멘틱 웹 실현가능
CSS3	CSS3 완벽 지원

2. 문법

HTML5 문서는 <!DOCTYPE html> 으로 시작하여 문서형식을 HTML5로 지정한다.
실제적인 HTML 문서는 2행부터 시작되며 <html></html> 사이에 기술한다.
<head></head>사이에는 title, 외부파일 참조, 메타 데이터의 설정 등이 있으며 브라우저에 표시되지 않는다.
브라우저에 출력되는 모든 요소는 <body></body>사이에 위치한다.

1) 요소

HTML 요소는 '시작 태그'와 '종료 태그', 'conent'로 구성된다.
또한 HTML 문서는 요소들의 집합으로 이루어진다.

태그는 대소문자를 구별하지 않지만 소문자를 권장한다.

1-1) 요소의 중첩

요소는 중첩이 될 수 있다. 이 경우 부모-자식 관계가 성립이 된다.
html은 중첩 관계를 통해 웹페이지의 구조를 표현하며, 중첩 관계는 파악하기 쉽도록 '들여쓰기'를 통해 시각적인 구분을 준다.

1-2) 빈 요소(Empty Element)

content를 가질 수 없는 요소를 빈 요소라고 한다.

br	hr	input	link	meta	img

2) 속성

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

2-1) 글로벌 어트리뷰선

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

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

3) 주석

으로 주석을 사용한다.

3. 시맨틱 웹(Semantic Web)

1) SEO의 중요성

웹 개발자로서 웹 사이트를 제작할 때 가장 중요한 것 중 하나는 '얼마나 검색엔진에 노출되는가?'이다.
당연히도 검색엔진에 노출되지 않으면 접속하는 유저도 없다.

따라서 SEO(Search Engine Optimization)이라는 검색엔진 최적화 마케팅 도구를 이용하여
검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다.
그 원리를 간단하게 알아보자.

2) 검색엔진 작동원리

검색엔진은 Robot이라는 프로그램을 이용하여 매일 전세계 웹사이트 정보를 수집한다.(크롤링, 크롤러가 수행)
또한 유저가 검색할만한 키워드를 미리 예상하여 검색 키워드에 대응하는 index를 생성해둔다.(인덱싱, 인덱서가 수행)

이때 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데, 이는 웹사이트의 HTML 코드이다.
즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 Semantic 요소를 해석하게 된다.

HTML로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 섞여 있다.

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

위의 사진을 보면 브라우저 상으로 동일한 외형을 보이지만 서로 다른 태그를 사용하여 만들었다.

이 둘을 비교해보면
첫번째 요소는 의미론적으로 어떠한 의미도 갖고 있지 않다. 즉, 의도가 명확하지 않다.
개발자가 태그에 폰트 크기와 굵기에 대한 메타데이터만을 브라우저에 알릴뿐, 어떠한 의미도 담지 않았다.

하지만 두번째 요소는 header중 가장 상위 레벨이라는 의미를 내포하여 의도한 요소의 의미가 명확히 나타나고 있다.
이러한 방식으로 작성할 경우 코드의 가독성을 높이고 유지보수를 쉽게할 수 있다는 장점이 있다.

검색엔진은 대체로 h1 요소 내의 컨텐츠를 웹문서의 중요한 제목임을 인식하고 index에 포함시킬 확률이 높다.
또한 다른 개발자가 작성된 코드를 볼 때에도 h1요소 내의 컨텐츠가 제목임을 인식할 수 있다.

시멘틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서정보를 전달할 수 있으며
보다 효과적인 크롤링과 인덱셍이 가능하다.

정리하자면 시맨틱태그는 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할을 한다.
이를 이용하여 HTML요소의 의미를 명확히 해석하고 데이터를 활용할 수 있는 시멘틱 웹이 실현될 수 있다.

여기서 시멘틱 웹이란 웹상에 존재하는 수많은 페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던
웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자하는 발상이다.

3) non-semantic, semantic 요소

3-1) non-seamantic 요소

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

3-2) semantic 요소

h1, form, table, img 등이 있으며 content의 의미를 설명한다.

아래는 HTML5에 새롭게 추가된 것들이다.

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

저작자표시

'🌌 | WEB DEV > HTML CSS' 카테고리의 다른 글

CSS_flex(2) (0)	2022.01.30
CSS_flexbox(1) 수평정렬 (0)	2022.01.30
HTML & CSS 활용 프로젝트_ 카드셔플 & 디스펜싱 (0)	2022.01.28
CSS _transition(2) (timing-function) (0)	2022.01.14
CSS _transition(1) (property, timing, delay) (0)	2022.01.14

PoeimaWeb) HTML5_2~3(기본문법, 시멘틱, 검색엔진)

1. HTML5

2. 문법