HTML5 자습서 기본적인 HTML 태그들

HTML에는 수십가지 태그가 있고, 각 태그는 서로 다른 속성을 가지기 때문에 이 모든 것을 한번에 모두 익히기는 어렵습니다. 이 문서는 자주 쓰이는 몇 가지 태그들과 속성을 간략히 소개합니다.

텍스트 레벨 태그들 - a, em, strong

요소들:

예시:

<p>
  <strong>HTML</strong><em>Hypertext Markup Language</em>의 약자입니다.
  <a href="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a>가
  최초로 고안하였습니다.
</p>

@pp run

단락과 소제목 - p, h1, h2, h3, h4, h5, h6

요소들:

예시:

<h1>HTML 자습서</h1>
<h2>준비물</h2>
<p>준비물은 어쩌고 저쩌고...</p>
<h2>HTML</h2>
<p>HTML은 웹 페이지를 만들 때 사용되는 문서 형식입니다.</p>
<h2>CSS</h2>
<p>CSS는 HTML 등의 마크업 언어로 작성된 문서를 꾸미기 위해 사용합니다.</p>

@pp run

목록 - ul, ol, li

요소들:

예시:

<p>점식에 뭐 먹을까?</p>
<ul>
  <li>짜장면</li>
  <li>탕수육</li>
  <li>짬뽕</li>
</ul>

<p>좋아하는 음식 순서는?</p>
<ol>
  <li>탕수육</li>
  <li>짜장면</li>
  <li>짬뽕</li>
</ol>

@pp run

표 - table, thead, tbody, tr, th, td

요소들:

예시:

<table>
  <thead>
    <tr>
      <th>제목</th>
      <th>저자</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>나의 한국 현대사</td>
      <td>유시민</td>
    </tr>
    <tr>
      <td>What is History</td>
      <td>E. H. Carr</td>
    </tr>
  </tbody>
</table>

@pp run

미디어 - img, video, audio

요소:

예시:

<p>
  문장 중간에
  <img
    src="http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg"
    width="100" height="60"
    alt="Tim Berners-Lee 얼굴">
  이미지를 넣어보아요.
</p>

@pp run

다음 단계

가이드

HTML

CSS

자바스크립트