HTML5과 Semantic Web에 대해서

테루·2021년 3월 31일

html html5 semantic web

HTML 5 란 무엇인가?

html 5의 탄생

html 5는 2014년 10월 28일에 차세대 웹 표준으로 확정되었다.

전 버전에서 총 7개의 기능들이 추가가 되었다

멀티미디어
플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원한다.
그래픽
캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다.

( WebGL : 기반의 그래픽 라이브러리이다. 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공된다.)

통신
html5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능하다.
디바이스 접근(Device acess)
카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다.
오프라인 및 저장소
오프라인 상태에서도 앱을 동작시킬 수 있다.
시맨틱 태그
HTML 요소의 의미를 명확하게 설명하는 시맨틱 태그를 도입하게 함으로써 검색엔진에 최적화되고 개발자와 검색엔진 모두에게 콘텐츠의 의미를 명확하게 설명할 수 있다.
CSS3
html5 는 CSS3를 완벽하게 지원한다.

HTML 5의 구조

HTML 5문서는 DOCTYPE html으로 시작하여 문서 형식을 HTML5로 지정한다.
HTML document는 .html을 가지는 단순한 택스트 파일이다.
즉 메모장으로도 쓸 수 있다는 것이다.
하지만 메모장은 너무 효율이 떨어지기 때문에 editor 나 IDE를 사용하는게 편하다.

~~HTML+CSS+Javascript 웹 표준의 정석에서 가져옴~~

그 다음으로 html / head / body로 구분 되어있다.

html
웹 문서의 시작과 끝을 나타내는 태그로 웹 브라우저가

<html>을 만나면 </html>까지의 소스를 읽어 화면에 표시한다.

head
웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 적는 곳이다.
이곳에는 document title, 메타데이터, 외부파일의 참조 등이 들어가고
이 정보들은 브라우저에 보이지 않는다.

meta태그
메타 태그란 책으로 비유하자면 책의 가격, 쪽수, 지은이와 같은 책에 대한 정보를 적어놓는 것을 말한다.
메타 태그에서 가장 중요한 건
화면에 글자를 표시할 때 어떤 인코딩을 상용할지 지정하는 것이다.
<meta charset="UTF-8">를 지정하지 않는 다면 화면에서 한글이 깨질 수도 있다.
그리고 메타 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자등의 정보를 지정할 수 있다.
이것들은 검색엔진이 사이트를 검색하는데 참고한다.

body

실제로 웹 브라우저에 보이는 부분으로써 브라우저에 출력되는 모든 부분이 이곳에 작성된다.

HTML의 기본 문법

요소

<p> html 요소</p>

이와 같이 시작태그와 끝 태그로 이루어 진 것이 요소이다.
태그는 대소문자를 구분하진 않지만 W3C에서 HTML4에서는 소문자를 추천하므로 HTML5에서도 소문자를 쓰는 것을 추천한다.

빈 요소

content를 가질수 없는 요소를 빈 요소라고 한다.
빈 요소는 content를 가질수 없고 속성만 가질 수 있다.

br
hr
img
input
link
meta

속성(Attribute)

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

<img src="index.html">

src는 이미지 파일에 대한 주소를 나타낸다.

글로벌 속성(Attribute)

글로벌 속성은 모든 태그에서 사용이 가능한 속성으로 몇몇 속성은 효과가 적용되지 않을 수도 있지만 대체로 사용이 가능하다.

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