HTML5 구조(아웃라인) 파악해주는 HTML5 Outliner 사이트 두군데

HTML5의 아웃라인

HTML 문서의 아웃라인은 h1, h2, h3, h4, h5, h6으로 만듭니다. 그런데, h 뒤에 붙은 숫자대로 아웃라인이 만들어지는 것은 아닙니다. section, article 등 섹션을 만드는 태그와 함께 아웃라인이 결정됩니다.

예를 들어

<h1>Lorem</h1>
<h1>Ipsum</h1>

의 아웃라인은 다음과 같습니다.

1. Lorem
2. Ipsum

하지만

<h1>Lorem</h1>
<section>
  <h1>Ipsum</h1>
</section>

의 아웃라인은 다음과 같습니다.

1. Lorem
   1.1 Ipsum

HTML 문서가 길어지고 복잡해지면 아웃라인을 파악하는 것이 힘들어집니다.

아웃라인 파악을 도와주는 사이트 두 곳을 소개해드립니다.

HTML5 Outliner

파일을 업로드하거나 소스를 붙여넣은 후 [Show outline] 버튼을 클릭하면 오른쪽에 아웃라인이 나옵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <h1>Lorem</h1>
    <section>
      <h1>Ipsum</h1>
      <article>
        <h1>Dolor</h1>
        <h2>Amet</h2>
      </article>
      <h1>Consectetur</h1>
      <h2>Adipiscing</h2>
    </section>
  </body>
</html>

화면이 바뀌지 않고 바로 결과를 볼 수 있는 것이 장점입니다.

HTML 5 Outliner

파일을 업로드하고나, 소스 코드를 붙여넣는 방법 뿐 아니라, URL을 입력해서 아웃라인을 파악할 수 있다는 장점이 있습니다.

Category

이 글을 공유하기

Kakao

Book navigation