HTML 구조 태그 정리

Flex·2022년 2월 13일

HTML/CSS/JS

HTML 모음

목록 보기

4/13

HTML에서 구조 요소로 쓰이는 태그를 정리해봤다.

`<div>` Tag

<div> : 플로우 콘텐츠를 위한 통용 컨테이너이다. (Block)

CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
"순수" 컨테이너로서 아무것도 표현하지 않는다.
-->다른 요소 여럿을 묶어 그룹화하기 위해서 사용한다.
그룹화 시 이점이 뭔데요..?
1. class 나 id 속성으로 꾸미기 쉽도록 돕는다.
2. 문서의 특정 구역이 다른 언어임을 표시(lang 속성)하는 용도로 사용한다.
의미를 가진 다른 구획 요소(<article>, <nav>, ...)가 적절하지 않을 때에만 사용해야 한다.
블록(Block) 요소이므로 바로 옆에 다른 요소를 배치할 수 없다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/div

`<span>` Tag

<span> : 구문 콘텐츠를 위한 통용 인라인(Inline) 컨테이너이다.

본질적으로는 아무것도 나타내지 않는다.
--> 스타일을 적용하기 위해서, 또는 특성의 값을 공유하는 요소를 묶을 때 사용할 수 있다.
적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/span

`<header>` Tag = 페이지의 머리

<header> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
ex) 제목, 로고, 검색 폼, 작성자 이름, ...

웹 페이지의 header 는 하나만 사용해야한다.
다른 <header> 와 <footer>를 제외한 플로우 콘텐츠를 가질 수 있다.

Example

페이지 제목

<header>
    <h1>Structure Element Page Title</h1>
	<img src="html.png" alt="html">
</header>

글 제목

<article>
  <header>
    <h2>The Example</h2>
    <p>Posted on Sunday, <time datetime="2022-02-13">13 February 2022</time> by Flex</p>
  </header>
  <p>This is structure element document.</p>
  <p><a href="https://velog.io/@mangozoo20">Continue reading....</a></p>
</article>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/header

`<footer>` Tag = 페이지의 발

<footer> : 가장 가까운 구획 콘텐츠 또는 구획 루트의 footer를 나타낸다.
ex) 구획의 작성자, 저작권 정보, 관련 문서, ...

다른 <footer> 와 <header>를 제외한 플로우 콘텐츠를 가질 수 있다.

Example

<footer>
  Some copyright info or perhaps some author
  info for an &lt;article&gt;?
</footer>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer

`<nav>` Tag

<nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다.
ex) 메뉴, 목차, 색인, ...

보통 페이지에 바 형태의 메뉴형식으로 자리한다.
주요 탐색 링크 블록을 위한 요소이다.
하나의 문서에 여러 개의 <nav>태그 사용이 가능하다.
- 용도를 나눠서 사용할 수도 있음.

Example

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

- `<footer>` 와의 차이점은 뭔가요? 🤔

<footer> 에는 사이트 전체 페이지 사이를 이동할 수 있는 링크들이 담겨져있는 반면,
<nav> 에는 일반적으로 현재 사용자가 보고 있는 페이지 내에서 이동할 수 있는 링크들이 들어갑니다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/nav

`<aside>` Tag

<aside> : 문서의 주요 내용과 간접적으로 연관된 부분을 나타낸다.
ex) 사이드바, 콜아웃 박스, ...

"별도 구획 요소" 로 생각하면 편하다.
- 페이지에서 있어도 그만, 없어도 그만인 내용들이 자리함. (간접적/부가적인 정보)

Example

<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/aside

`<main>` Tag

<main> : 문서 <body>의 주요 콘텐츠를 나타낸다.

주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.

<body> 태그 내에서 딱 하나만 사용될 수 있다.
MDN 에서 <main> 태그 페이지를 살펴보면, IE11 이하를 지원할 때는 추가적인 작업이 필요하다. <main role="main">
<main>은 요소 개요에 영향을 주지 않는다.
- 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용임.

Example

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

<!-- other content -->

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/main

`<article>` Tag

<article> : 문서, 페이지, 애플리케이션, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
ex) 게시판, 블로그 글, 매거진, 뉴스 기사, ...

단독적인 콘텐츠로써 이해가능한 내용이 들어간다.
하나의 문서가 여러 개의 <article>을 가질 수 있다.
여러 글이 있을 때 각각의 글이 <article> 요소가 되며, 그 안에는 여러 개의 <section>이 존재할 수 있다.

Example

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

사용시 참고사항

각각의 <article>을 식별할 수단이 필요하다.
- 주로 제목(<h1>~<h6>)요소를 자식으로 포함한다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

`<section>` Tag

<section> : HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
- 보통 제목을 포함하지만, 항상 그런것은 아니다.

요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <article> 요소가 더 좋은 선택일 수 있다.
<section>을 일반 컨테이너로 사용하지 말아라!!
- 단순한 스타일링이 목적이라면 <div>를 사용해야 한다.
문서 요약에 해당 구획이 논리적으로 나타나야 할때 사용한다.

Example

<section>
  <h2>Heading</h2>
  <img>some image</img>
</section>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/section

Flex

💵 오늘을 살자

이전 포스트

HTML 텍스트 태그 정리

다음 포스트

HTML 구조 태그 정리

HTML 모음

`<div>` Tag

`<span>` Tag

`<header>` Tag = 페이지의 머리

Example

페이지 제목

글 제목

`<footer>` Tag = 페이지의 발

Example

`<nav>` Tag

Example

- `<footer>` 와의 차이점은 뭔가요? 🤔

`<aside>` Tag

Example

`<main>` Tag

Example

`<article>` Tag

Example

사용시 참고사항

`<section>` Tag

Example

HTML 텍스트 태그 정리

HTML - 시맨틱 웹(Semantic Web)

0개의 댓글

HTML 구조 태그 정리

HTML 모음

<div> Tag

<span> Tag

<header> Tag = 페이지의 머리

Example

페이지 제목

글 제목

<footer> Tag = 페이지의 발

Example

<nav> Tag

Example

- <footer> 와의 차이점은 뭔가요? 🤔

<aside> Tag

Example

<main> Tag

Example

<article> Tag

Example

사용시 참고사항

<section> Tag

Example

HTML 텍스트 태그 정리

HTML - 시맨틱 웹(Semantic Web)

0개의 댓글

`<div>` Tag

`<span>` Tag

`<header>` Tag = 페이지의 머리

`<footer>` Tag = 페이지의 발

`<nav>` Tag

- `<footer>` 와의 차이점은 뭔가요? 🤔

`<aside>` Tag

`<main>` Tag

`<article>` Tag

`<section>` Tag