🤔 HTML5란?
HTML(HyperText Markup Langauge)은 웹 페이지를 기술하기 위한 마크업 언어이며 웹 페이지의 내용과 구조를 담당하는 언어로 HTML태그를 통해 정보를 구조화하는 것이다.
HTML5는 차세대 웹 표준으로 아래와 같은 기능들이 추가됐다.
- 시맨틱 태그
- CSS3
- 멀티미디어
- 그래픽
- 통신
- 디바이스 접근
- 오프라인 및 저장소
📝 HTML5 문서
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p> HTML5입니다 </p>
</body>
</html>HTML5는 문서에 대한 특징은 다음과 같다
- HTML5는 반드시 <!DOCTYPE html>으로 시작해 문서형식을 HTML5로 지정한다.
- <head> 와 </head> 사이에는 title, 외부 파일 참조, 메타 데이터 등이 위치하며 사용자에겐 보여지지 않는다.
- 웹 브라우저. 즉, 사용자에게 보여지는 실질적인 요소는 <body> 와 </body> 사이에 위치한다.
👀 HTML 기본문법
1. HTML 요소(Element)
- HTML 요소는 시작태그(start tag)와 종료태그(end tag) 그리고 태그 사이에 위치한 Content로 구성된다.
- HTML document는 요소(Element)들의 집합으로 구성된다.
2. 어트리뷰트(Attribute)
- 요소의 성질 또는 특징을 정의한다.
- 어트리뷰트는 시작 태그에 위치해야하며 이름과 값의 쌍을 이룬다.
3. 주석(Comments)
- 주석(Comments)은 개발자들이 코드를 설명하기 위해 사용되며 브라우저 화면에 표시되지 않는다.
<!-- 주석은 화면에 표시되지 않는다. -->
<p>Lorem ipsum dolor sit amet</p>4. 글로벌 어트리뷰트(Global Attribute)
- 글로벌 어트리뷰트는 모든 HTML요소가 공통으로 사용할 수 있는 어트리뷰트다.
| id | 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. |
| class | 스타일시트에 정의될 class를 요소에 지정한다. 중복 지정이 가능하다. |
| hidden | css의 hidden과는 다르게 브라우저에 노출되지 않게된다. |
| lang | 지정된 요소의 언어를 지정한다. 검색엔진 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. |
| style | 요소에 인라인 스타일을 지정한다. |
| tabindex | 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다. |
| title | 요소에 관한 제목을 지정한다. |
기본 태그
- 문서 형식 정의 tag
- html
- head
- title
- style
- link
- script
- meta
- body
'HTML CSS' 카테고리의 다른 글
| [HTML] 브라우저 렌더링 과정 (0) | 2021.03.25 |
|---|---|
| [HTML] DOM의 이해 (0) | 2021.03.22 |
| [HTML] 시맨틱(Semantic) 태그에 대하여 (0) | 2021.02.04 |
