본문 바로가기

HTML 개요

액트 2020. 1. 15.
반응형

HTML 개요


HTML이란?

HTML 은 HyperText Markup Language의 약자입니다.

웹페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다.

각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.


HTML 태그(tag)

HTML 태그는 태그 이름을 꺾쇠 괄호(<>)로 감싸서 표현합니다.

시작 태그는 태그이름을 <태그이름> 표현, 종료 태그는 </태그이름>로 표현합니다.

 문법
<태그이름> ~ </태그이름>

HTML 태그는 보통 시작 태그(Start Tag, Opening Tag)와 종료 태그(End Tag, Closing Tag)의 한 쌍으로 구성됩니다.

종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다.

태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다.

종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(Empty Tag)라고 합니다.

ex)

<img>, <br>, <hr>


HTML 버전

버전 년도 DOCTYPE 및 설명
HTML 1.0 1991 팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML
HTML 2.0 1995 국제 표준으로 제정된 최초의 HTML
HTML 3.2 1997 W3C에 의해 제정된 최초의 HTML
HTML 4.01 1999 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 2000 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 2014 <!DOCTYPE html>

HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>			
    <meta charset="UTF-8">
    <title>웹페이지의 제목</title>
</head>
<body>
    <h1>제목1</h1>
    <p>단락</p>	
</body>
</html>

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시

<html lang="en"> : HTML 문서의 루트(root) 요소를 정의 

<head> : HTML 문서의 메타데이터(metadata)를 정의

  • 메타데이터(metadata)란 HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.

1. 웹 브라우저의 툴바(toolbar)에 표시됩니다.

2. 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.

3. 검색 엔진의 결과 페이지에 제목으로 표시됩니다.

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.

<h1> : 제목(heading)을 나타냅니다.

<p> : 단락을 나타냅니다.


HTML 요소 구조

HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다. 또한 HTMl 요소는 시작 태그로 시작해서 종료 태그로 끝납니다.

HTML 요소 구조, 사진출처: TCPschool.com

속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현됩니다.

※ 속성 이름은 소문자로 작성

HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다. 하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다. 또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 합니다. 

※ 속성값은 따옴표로 감싸기

HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습니다. 하지만 속성값을 따옴표로 감싸지 않으면, 값에 띄어쓰기가 들어가게 되면 정확한 값을 저장할 수 없습니다. 


 

 

 

출처: TCPSCHOOL.com

반응형

댓글