HTML이란?

웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.

HT - HyperText, 문서와 문서가 링크로 연결되어 있다.

M - Markup, 태그로 이루어져 있다.

L - Language

태그란?

Tag
태그란 정보를 정의 하는 형식

태그의 형식

<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>

태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의 한다.

열리는 태그가 있으면 닫히는 태그가 있어야 한다.

닫히는 태그는 태그 명 앞에는 '/'가 붙는다.

속성은 태그의 부가적인 정보가 들어온다. 아래 예제에서 href는 속성명, http://opentutorials.org은 속성값이다. href 속성은 컨텐츠인 생활코딩이 opentutorials.org와 연결되어 있다는 것을 의미한다.

닫히는 태그가 필요 없는 태그도 있다. 이런 경우 <태그명 />의 형식을 갖는다.

<br />
<input type="button" value="버튼" />

문서의 구조

HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝난다.
최상위 태그로 <html>을 사용한다. 그 하위에 <head> 태그와 <body> 태그를 컨텐츠로 가지고 있다.
<head> 태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다.
<body> 태그에는 문서의 내용이 위치한다.

<html>
    <head>
        문서를 정의하는 데이터가 위치함
    </head>
    <body>
        문서에 표시되는 컨텐츠가 위치함
    </body>
</html>

참고. 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미한다. 이를테면 태그가 대표적인 메타데이터이다.

HTML 파일

HTML 코드를 파일에 저장하고 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고, 확장자명으로 html 혹은 htm을 사용한다.

예제

example1. 아래 예제는 <a> 태그를 이용해서 링크를 만들고 <img> 태그를 이용해서 이미지를 출력하는 방법에 대한 사례다. (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <img alt="생활코딩 로고" src="https://opentutorials.org/user/course/1/94.png" />
        <br />
        <a href="http://opentutorials.org/course/1">생활코딩</a>
    </body>
</html>