HTML5 자습서 HTML 개요

HTML은 하이퍼텍스트 마크업 언어(Hypertext Markup Language)의 약자로, 웹 페이지를 만들 때 사용되는 문서 형식입니다.

하이퍼텍스트(Hypertext)란?

하이퍼텍스트(Hypertext)란 하이퍼링크(Hyperlink)를 담고 있는 문서를 뜻합니다. 하이퍼링크는 문서들이 서로 연결되어 있는 고리를 말합니다. 일반적인 웹 브라우저들에서는 HTML 문서의 하이퍼링크를 표현할 때 파란색 글씨에 밑줄을 그어 나타내며, 마우스로 해당 글씨를 클릭하면 연결된 문서로 이동할 수 있습니다.

마크업 언어(Markup language)란?

마크업 언어란 문서에 부가적인 정보를 표시(marking-up)하기 위해 고안된 표기 방식을 뜻합니다.

예를 들어 다음은 마크업이 되지 않은 일반 문서입니다:

왜 하필 이곳에
왜 하필 당신이

하상욱 시인, “같은 옷”

위 시에서 어디가 본문인지, 저자 이름은 무엇인지, 제목은 무엇인지를 아래와 같이 가상의 마크업 언어로 마크업할 수 있습니다:

<행>왜 하필 이곳에</행>
<행>왜 하필 당신이</행>

<저자>하상욱</저자> 시인, <제목>같은 옷</제목>

위 표기 방식에서 <행>, </행>, <저자> 등을 태그(tag)라고 부릅니다. 그 중에서도 <태그 이름> 형식은 여는 태그, </태그 이름> 형식은 닫는 태그라고 부릅니다. 수식을 쓸 때 괄호를 열고 닫는 것과 마찬가지로 여는 태그와 닫는 태그를 한 쌍으로 사용해야 합니다.

여는 태그와 닫는 태그, 그 안에 담긴 내용을 모두 합쳐서 요소(element)라고 부릅니다. 예를 들어 <행>왜 하필 이곳에<행>는 “행 요소”라고 부릅니다.

정리하자면 <행>왜 하필 이곳에</행>에서:

가 됩니다.

HTML 예시

위 마크업에서는 한글로 된 태그 이름을 사용하고 있는데 이는 이해를 돕기 위한 가상의 예입니다. 실제 HTML의 태그 이름은 영어 알파벳을 사용합니다. 다음은 실제 HTML 마크업 예시입니다:

<p>
  HTML은 <em>Hypertext Markup Language</em>의 약자입니다.
</p>
<p>
  하이퍼링크는 문서들이 서로 연결되어 있는 고리를 말하고,
  마크업 언어란 문서에 부가적인 정보를 표시(marking-up)
  하기 위해 고안된 표기 방식을 뜻합니다.
</p>

웹 브라우저는 위 HTML 문서를 아래와 같이 보여줍니다:

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

하이퍼링크는 문서들이 서로 연결되어 있는 고리를 말하고, 마크업 언어란 문서에 부가적인 정보를 표시(marking-up)하기 위해 고안된 표기 방식을 뜻합니다.

문법에 대한 더 자세한 설명을 읽으려면 HTML 문법 문서를 참고하세요. 궁금하지 않다면 지금 읽지 않아도 괜찮습니다.

다음 단계

가이드

HTML

CSS

자바스크립트