HTML

HTML 은 이름표를 붙인 문서입니다

HTML 은 HyperText Markup Language 의 줄임말입니다. 평범한 문서를 놓고 각 부분에 이름표를 붙이면 — 이 줄은 제목, 이 덩어리는 문단, 이 낱말은 다른 곳으로 가는 문 — 그것이 HTML 입니다. 이 이름표를 태그라 부르고, 꺾쇠 괄호 사이에 씁니다.

브라우저는 알아서 짐작하지 않습니다. 제목 태그 안의 글자를 크고 굵게 그리는 이유는, 여러분이 그것이 제목이라고 말해 주었기 때문입니다. HTML 을 가장 먼저 배울 값어치가 여기 있습니다 — 웹에서 "어떻게 보이는가"가 아니라 "무엇인가"를 말하는 곳은 여기뿐입니다.

• 태그는 보통 짝으로 옵니다. 여는 태그와 빗금이 붙은 닫는 태그가 있고, 내용은 그 사이에 들어갑니다.
• 태그 안에 태그가 들어갈 수 있습니다. 페이지는 큰 상자 하나가 작은 상자들을 품은 모양이고, 그 안이 또 그렇습니다.
• 감쌀 내용이 없어 혼자 서는 태그도 몇 개 있습니다. 그림이나 줄바꿈이 그렇습니다.
• HTML 파일은 그냥 글자 파일입니다. 어떤 편집기로도 쓸 수 있고, 이름 끝을 .html 로 두면 됩니다 — 설치할 것이 하나도 없습니다.

정말로 동작하는 가장 작은 페이지

이보다 더 줄인 정직한 예제는 없습니다. index.html 로 저장하고 두 번 누르면 브라우저가 진짜 웹 페이지를 보여 줍니다. 여러분이 가 본 모든 큰 사이트도 정확히 이 뼈대에서 출발했습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>This is the first web page I made.</p>
  </body>
</html>

한 줄씩 뜯어보기

1. <!DOCTYPE html>이 문서가 현대의 HTML 이라고 브라우저에게 알립니다. 빼면 브라우저가 옛날 호환 모드로 물러나 다르게 동작합니다.
2. <html lang="en">문서를 열면서 이 문서의 언어를 밝힙니다. 화면 낭독기가 목소리를 고르는 기준이고, 브라우저가 번역을 권하는 기준입니다.
3. <head> … </head>head 에는 페이지 자체가 아니라 페이지에 대한 정보가 들어갑니다. 여기 있는 것은 화면에 나타나지 않습니다.
4. <meta charset="utf-8" />글자를 UTF-8 로 적었다고 알립니다. 이 줄이 없으면 한글이 물음표 줄로 변할 수 있습니다.
5. <title> … </title>브라우저 탭과 즐겨찾기에 나오고, 검색 결과의 제목 줄이 되는 글입니다. 로봇이 아니라 사람이 읽을 문장으로 씁니다.
6. <body> … </body>body 가 페이지 자체입니다. 손님이 실제로 보는 것은 전부 이 두 태그 사이에 들어갑니다.
7. <h1> · <p>가장 큰 제목 하나와 문단 하나. 여기까지가 이미 완전하고 올바른 페이지입니다.

실제로 쓰게 되는 태그들

HTML 에는 태그가 백 개 넘게 있지만, 아래 여덟 개로 거의 모든 것을 만들 수 있습니다. 이것만 제대로 익히고 나머지는 필요할 때 찾아보면 됩니다.

속성 — 태그에 덧붙이는 정보

속성은 여는 태그 안에 이름과 따옴표로 감싼 값으로 씁니다. 태그 이름만으로는 전할 수 없는 것을 브라우저에게 알려 줍니다.

• href 와 src 는 주소를 담습니다. 링크가 열 페이지, 그림이 불러올 파일입니다.
• id 는 하나뿐인 요소에 이름을 붙이고, class 는 한 무리에 이름을 붙입니다. 스타일과 스크립트가 이 이름으로 대상을 찾습니다.
• alt · title 과 aria- 로 시작하는 속성들은 볼 수 없는 사람을 위해 요소를 설명합니다. 한 줄이면 되는데, 누가 이 페이지를 쓸 수 있는지가 달라집니다.

HTML 은 뼈대일 뿐, 몸 전체가 아닙니다

페이지는 하는 일이 다른 세 가지 언어로 이루어집니다. 이 셋을 섞지 않는 것이 나중에 고칠 수 있는 사이트를 만드는 비결입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Button example</title>
    <style>
      body { font-family: sans-serif; padding: 2rem; }
      button { padding: 0.6rem 1.2rem; border-radius: 999px; }
    </style>
  </head>
  <body>
    <h1 id="title">Clicked 0 times</h1>
    <button onclick="count()">Click me</button>

    <script>
      let n = 0;
      function count() {
        n = n + 1;
        document.getElementById('title').textContent = 'Clicked ' + n + ' times';
      }
    </script>
  </body>
</html>

이 파일 하나에 셋이 다 들어 있습니다. 저장해서 열고 버튼을 눌러 보세요 — 제목의 숫자가 올라갑니다. style 블록을 지워 보면 페이지는 그대로 동작하고 모양만 밋밋해집니다. 셋을 나누어 두는 이유가 그것입니다.

그래서 HTML 파일로 무엇을 하나

같은 파일 한 장이 네 가지로 쓰이고, 뒤로 갈수록 더 많은 사람에게 열립니다. 웹서버가 필요한 것은 두 번째 하나뿐이고, 그것이 바로 다음 주제입니다.