HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.
웹페이지의 내용(content)와 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
HTML5 문서는 반드시 <!DOCTYPE html>로 시작하여 문서 형식(documnet type)을 HTML5로 지정한다.
실질적인 HTML documnet는 2행부터 시작되는 <html>과 </html> 사이에 기술한다.
<head>와 </head> 사이에는 documnet title, 외부 파일 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
웹 브라우저에 출력되는 모든 요소는 <body> 와 </body> 사이에 위치한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
<html>HTML documnet는 .html 확장자를 갖는 순수한 텍스트 파일이다.
HTML5 기본 문법.
-요소
HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다.
HTML documnet는 요소(element)들의 집합으로 이루어진다.
태그는 대소문자를 구별하지 않으나 소문자를 사용하는 것이 일반적이다.
요소는 중첩될 수 있다. 즉, 요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립된다. 이러한 부자관계로 정보를 구조화하는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>
</html>
HTML 요소는 웹페이지를 구성하는 모든 요소들을 포함한다.
-빈요소 (Empty Element)
content를 가질 수 없는 요소를 빈 요소(Empty element of Self-Closing element)라 한다. 아래의 예와 같이 빈 요소는 content가 없으며 어트리뷰트(Attribute)만을 가질 수 있다.
<meta charset="utf-8">빈 요소 중 대표적인 요소는 아래와 같다.
br, hr, img, input, link, meta
-어트리뷰트(Attribute)
어트리뷰트란 요소의 성질, 특징을 정의하는 명세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(이미지 파일경로, 크기 등)를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
<img src="html.jpg" width="104" height="142">src = 어트리뷰트 명 // "html.jpg" = 어트리뷰트 값
-글로벌 어트리뷰트(HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.
id : 유일한 식별자를 요소에 지정한다. 중복불가
class : 스타일스티에 정의된 class를 요소에 지정한다. 중복가능
hideen : css의 hidden관느 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang : 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 된다.
style : 요소에 인라인 스타일을 지정한다.
tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
title : 요소에 관한 제목을 지정한다.
'웹 > HTML' 카테고리의 다른 글
| List and Table tags (0) | 2021.07.21 |
|---|---|
| Hyperlink (0) | 2021.07.21 |
| 텍스트 관련 태그 (0) | 2021.07.20 |
| 기본 태그 (0) | 2021.07.20 |
| 시맨틱 웹(Semantic Web) (0) | 2021.07.20 |