1.HTML5
HTML (Hyper Text Markup Language)
웹페이지 기술용 언어.
내용과 구조를 담당. 태그를 통해 구조화한다.
2014년 10월 28일 차세대 웹 표준으로 기능이 추가됨.
멀티미디어-플래시같은 플러그인 없이 비디오, 오디오 기능을 지원.
그래픽-SVG, 캔버스를 사용한 2차원 그래픽, CSS, WebGL을 이용한 3차원 그래픽 지원.
통신-서버와의 소켓 통신 지원으로 서버와의 양방향 통신 가능.
디바이스 접근-카메라, 동작센서 등의 하드웨어 기능 제어 가능.
오프라인 및 저장소-오프라인 상태에서도 애플리케이션을 동작시킬 수 있음. 플랫폼으로서 사용 가능.
시맨틱 태그-의미를 가진 태그를 도입해 콘텐츠의 의미를 설명할 수 있게 됨.
CSS3- 지원.
2. Hello HTML5
- HTML5 문서는 <!DOCTYPE html>으로 시작해 문서형식을 지정한다.
- HTML코드는 <html>과 </html>사이에 기술한다.
- <head>와 </head> 사이에는 타이틀, 외부 파일 참조, 메타데이터의 설정 등이 위치.
- 브라우저에 출력되는 요소는 <body>와 </body>사이에 위치한다.
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요</p>
</body>
</html>
3. HTML5의 기본 문법
3.1 요소(Element)
시작태그와 종료태그, 그리고 그 사이에 위치한 콘텐츠로 구성된다.
태그는 대소문자를 구분하지 않지만 소문자를 추천.
3.1.1 요소의 중첩 (Nested Element)
요소는 중첩될 수 있다.
중첩 시 들여쓰기를 한다. 가독성을 위해.
3.1.2 빈 요소 (Empty Element)
콘텐츠를 가질 수 없는 요소를 빈 요소라고 한다.
빈 요소는 콘텐츠 없이 어트리뷰트만을 가진다.
예를 들면 br, hr, img, input, link, meta 등..
3.2 어트리뷰트 (Attribute)
어트리뷰트란 요소의 성질, 특징을 정의하는 면세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보를 제공한다. 오트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
3.2.1 글로벌 어트리뷰트 (HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 몇몇 요소는 적용되지 않을 수 있지만, 대체로 모든 요소에 사용할 수 있다.
id - 식별자를 element에 지정한다. 중복 지정 불가능.
class - 스타일 시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden - css의 hidden과 다르게 의미상으로도 브라우저에 노출되지 않게 한다.
lang - 지정된 요소의 언어를 지정한다. 검색엔진이 크롤링 시 언어를 인식할 수 있게 한다.
style - 요소에 인라인 스타일을 지정한다.
tabindex - 사용자가 키보드로 페이지 요소 이동시 순서를 지정.
title - 요소에 관한 제목을 지정한다.
3.3 주석 (Comments)
주석은 주로 개발자에게 코드를 설명하기 위해 사용된다. 브라우저에 출력되지 않는다.
HTML에서 주석은 <!-- -->를 사용하여 표시하고 내부에 주석을 작성한다.
출처
https://poiemaweb.com/html5-syntax
HTML5 Introduction & Syntax | PoiemaWeb
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다. HTML5는 HTML의 최신 버전으로 아래와 같은 기능들이 추가되었다.
poiemaweb.com
'개발 > 웹' 카테고리의 다른 글
| [HTML] 4. HTML 기본 태그 (0) | 2019.12.24 |
|---|---|
| [HTML] 3. 시맨틱 웹 (0) | 2019.12.19 |
| [HTML] 1. 프런트엔드 개발자 학습 방향 (0) | 2019.12.17 |