HTML5와 태그란?

HTML은 웹페이지를 만드는 마크업 언어이다.
그동안 여러 버전을 출시되었고, 최근버전으로 HTML5이 나왔다.

HTML

- HTML 마크업을 통해서 웹페이지의 구조를 설계한다.
- HTML 요소들은 웹 페이지를 구성하는 요소이며, 태그를 사용하여 표현할 수 있다.
- 태그들은 각자의 기능과 의미를 가지고 웹페이지의 내용을 보여줍니다.

 

HTML5

- 이전 버전보다 정보 구조를 작성하는데 유리해졌다. div요소를 대신해서 header, nav, section, article, aside, footer 등을 이용해서 구체적인 구조를 만들 수 있다.
- 액티브 X나 별도 플러그인 없이 비디오, 오디오를 실행할 수 있다.
- 숫자, 날짜, 시간, 달력, 범위와 같은 양식 요소가 추가되었다.
- 그래픽 요소로 svg, canvas를 추가하여 고 해상도의 스크린을 위해 백터이미지를 활용할 수 있다.
- 공식적으로 활용되는 API가 있어서 다채로운 웹페이지를 만들 수 있다.
- 반면 하위버전의 브라우저에서는 구현하지 못하는 기능도 있다.

 

HTML API

- Geolocation : 지리정보, 위치정보를 제공하는 API로 구글지도, 네이버지도 등과 함께 사용하여 다양한 프로그램을 제작할 수 있다.
- Drag/Drop : 웹페이지 상에서 드래그앤 드롭이 가능하게 하는 것이다. 이를 활용하여 쇼핑몰의 쇼핑카드에 물건을 담는 기능을 쉽게 구현할 수 있다.
- Canvas : Canvas를 이용해 차트, 그래프 등을 표현이 가능하다. 현재 모든 브라우저에서 제공한다. (IE는 9버전 이상)
- Web Storage : 웹페이지의 내용이 사용자 로컬의 브라우저에 데이터를 저장할 수 있다. 이를 활용하면 웹사이트 성능에 영향을 미치지 않고 활용가능하다. 쿠키와 달리 저장용량이 크다.
- Web Workers : 여러 워커로 분산 작업하여 cpu 부하, 속도 저하 없이 작업을 가능하다.

 

태그

태그는 일반적으로 요소, Element라고 한다.
태그는 HTML문서를 이루는 중요한 요소이며, 태그마다 각기 다른 의미와 역할, 구조를 가지고 있다.

HTML5은 구조를 명확히 하게 만들 수 있다.
웹페이지의 내용과 구조에 맞게, 태그가 가지는 의미와 역할을 고려하여 적절하게 사용해야 한다.
적절한 태그 사용은 웹접근성과 SEO를 위해 필요한 사항이다.

태그는 대소문자를 구분하지 않는다. 하지만 소문자 사용을 권고하고 있다.

 

<div>
 div태그 사용예시
</div>

 

위는 div 태그의 사용 예시이다.
태그는 일반적으로 시작태그와 종료태그로 구성되어 있고, 그 사이에 내용을 입력한다.
종료태그를 제대로 마무리 하지 않는다면 웹페이지의 구현이 안되는 경우도 있다.
하지만 태그에 따라 종료태그 없이 시작태그만 사용하여 구현가능한 태그도 있다.(ex : hr, br 등)

 

<div>
 <p>문단 1번/p>
 <p>문단 2번/p>
</div>

태그는 시작태그와 종료태그 사이에 또 다른 태그를 사용할 수 있다.
태그는 중첩하여 사용가능하며, 이 때도 종료태그를 제대로 닫아야 기획한대로 웹페이지를 구현할 수 있다.

 

<div>
</div>

태그는 내용을 입력해야 하지만 상황에 따라 내용이 없는 빈태그도 작성할 수 있다.

 

속성과 속성값

속성은 Attributes라고 한다.

태그에는 속성을 사용할 수 있다.
속성은 태그의 정보를 담고 있으며, 속성값으로 그 내용을 정의한다.
속성은 시작 태그에 지정해야 하며, 속성과 속성값을 정의한다. 때론 속성 혹은 속성값만 사용하는 경우도 있다.

 

<img src="이미지경로" alt="이미지설명">

위의 소스코드는 img태그이며, 이는 웹페이지에 그림파일을 불러와 보이게 한다.
img 태그에 src 속성과 alt 속성을 가지고 있으며, 그림파일의 경로와 설명에 대한 정보를 가지고 있다.

 

<div style="width:100%; height:500px; background-color:yellow">
</div>

속성으로 style을 주면 위의 소스코드처럼 속성값을 주면 가로, 세로의 크기, 배경색 등을 설정할 수 있다.