[HTML] HTML TAG

Document element & metadata

<!DOCTYPE html>

  • 반드시 문서 최상단에 선언을 해야한다.
  • 문서의 타입에 대한 정보를 제공한다.
  • 제거하면 브라우저는 쿼크 모드로 html을 랜더링하여 다르게 동작할 가능성이 있다.

html

  • 최상위 요소로 lang="ko"을 통해 문서의 주 언어에 대해 설정한다.
  • 언어 설정은 검색엔진과 스크린 리더의 작동에 영향준다.
  • HTML 문서에 하나만 있다.

head

  • 문서에 적용되는 메타데이터의 집합이다.
  • HTML 문서에 하나만 있다.

title

  • HTML 문서의 제목이다.
  • HTML 문서에 반드시 하나만 있다.

link

외부의 자원을 문서와 연결한다.

meta

해당 문서의 메타데이터를 나타낸다.

  • <meta charset="UTF-8" /> : 문서의 문자 인코딩 상태, 대체로 UTF-8 로 설정하며 전 세계 모든 언어를 지원한다.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    : 브라우저에 어떤 행동을 지시하려는 목적으로 사용한다. IE8 버전 이상에서 항상 표준모드로 랜더링 된다.
  • <meta name="viewport" /> : 모바일 장치에서의 사용자 화면 사이즈에 대한 값을 설정한다.

Sections

body

  • 사용자에게 보여지는 문서의 컨텐츠 요소,
  • <body> 에는 제목, 이미지, 표, 목록 등등 HTML 문서의 모든 내용이 포함된다.
  • HTML 문서에 하나만 있다.

section, article

section

연관성 있는 문서의 구획을 나누고자 할 때 사용하는 태그이다.

article

독립적으로 구분하거나 재사용할 수 있는 구획을 나타내는 태그이다.

section vs article

  • article: 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음)
  • section : 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함)
  • article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)
<section>
  <article></article>
  <article></article>
</section>

header

특정한 컨텐츠의 시작 부분을 나타내는 요소로 일반적으로 구역의 제목(<h1>)을 포함한다.

h1, h2, h3, h4, h5, h6

  • heading 태그로 제목을 정하는 태그이다.
  • 숫자에 맞춰 중요도에 따라 사용하며 <h1>는 페이지 내에서 1번만 사용되는 것을 권장한다.
<h1>제목 태그 h1</h1>
<h2>제목 태그 h2</h2>
<h3>제목 태그 h3</h3>
<h4>제목 태그 h4</h4>
<h5>제목 태그 h5</h5>
<h6>제목 태그 h6</h6>
  • <hgroup>으로 대제목과 소제목을 나눌 수 있다.
<hgroup>
  <h1>제목</h1>
  <h2>소제목</h2>
</hgroup>
  • heading 요소들은 사용자로 하여금 페이지의 계층구조를 쉽게 파악할 수 있게한다.

  <h1>1. 고양이</h1>
    <h2>1-1. 정의</h2>
    <h2>1-2. 나라별 대표 고양이</h2>
  		<h3>i. 아시아</h3>
  		<h3>ii. 유럽</h3>
  			<h4>- 영국</h4>
    <h2>1-3. 특징</h2>
  		<h3>i. 신체적 특징</h3>

nav

네비게이션, 탐색을 위한 요소로 메뉴에 사용된다.

<nav>
  <ul>
    <li><a href="#">MENU01</a></li>
    <li><a href="#">MENU02</a></li>
    <li><a href="#">MENU03</a></li>
  </ul>
</nav>

aside

해당 콘텐츠와는 별개 콘텐츠를 표현하는 태그로 사이드바, 광고영역으로 활용된다.

<section>
  <article></article>
  <article></article>
</section>
<aside>
  <ul>
    <li><a href="#">SIDE-MENU01</a></li>
    <li><a href="#">SIDE-MENU02</a></li>
    <li><a href="#">SIDE-MENU03</a></li>
  </ul>  
</aside>

footer

대체로 사이트 가장 하단에 들어가며 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 구획 요소이다.

<footer>
  <address>서울시 xx구 xx로 xx길 xxxx호</address>
</footer>

Grouping Content

ol, ul, li

ol(ordered list) + li

  • ol 순서가 있는 목록, 각 항목은 li로 표현한다.
  • 시작값을 정하고 싶다면 start="숫자"을 넣는다.
  • 특정 목록에 번호를 정하고 싶다면 해당 목록에 value="숫자" 값을 넣는다.
<ol start="3">
  <li>one</li>
  <li value="9">two</li>
  <li>three</li>
</ol>

ul(unordered list) + li

ul 순서가 없는 목록, 각 항목은 li로 표현한다.

<ul>
  <li>Red</li>
  <li>White</li>
  <li>Blue</li>
</ul>

목록 안에 목록

<ul>
  <li>
    Red
    <ul>
      <li>orange Red</li>
      <li>vivid Red</li>
      <li>Blood Red</li>
    </ul>
  
  </li>
  <li>White</li>
  <li>Blue</li>
</ul>

dl, dt, dd

  • <dl>: 정의 목록(Definition List)
  • <dt>: 정의 용어(definition term)
  • <dd>: 용어 설명(definition description)
<dl>
  <dt>카페라떼</dt>
  <dd>샷 + 우유</dd>
  <dt>녹차라떼</dt>
  <dd>녹차가루 + 우유</dd>
</dl>

div

아무것도 없는 빈 태그로 레이아웃을 나누거나 묶을 때 사용한다. 무차별적으로 남발하는 것 보단 상황에 맞는 태그가 없을 경우 사용한다.

<div>첫번째 div</div>
<div>
  <h3>제목 태그 입니다.</h3>
  <p>p 태그 입니다.</p>
</div>

p

단락 태그로 문단을 표시한다. <p> 는 항상 새 줄에서 시작하며 하나의 완결된 문단이다. 그러므로 안에 <p> 를 넣을 수 없다.

<p>
  첫번째 문단
</p>
<p> 
  두번째 문단
</p>

❌잘못된 사용

<p>
  첫번째 문단
	<p> 두번째 문단</p>
</p>

figure, figurecaption

  • figure : 이미지(<img>)와 캡션(<figurecaption>)이 연결되도록 한다.
  • figurecaption: 이미지에 대한 설명, 자막을 넣는다.
<figure>
	<img src="dog_img.jpg" alt="들판을 달리는 강아지">
	<figcaption>
		들판을 달리는 강아지
	</figcaption>
</figure>

pre

<pre>에 작성한 공백과 줄 바꿈을 모두 유지되어 내용 그대로 화면에 표현된다.

<pre>
	let val= 1;
    function myFunc(value){
      return value;
    }
    myFunc(val);
</pre>

address

문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 적는다.
연락처 정보에는 전화번호, 메일 주소, 우편 주소 등이 있다.

<footer>
  <address>서울시 xx구 xx로 xx길 xxxx호</address>
</footer>

hr

브라우저 상에 가로줄로 표현된다. 실질적으로 가로줄을 표현하기 위해 사용한다기 보단 주제, 단락, 콘텐츠를 구별을 위해 사용한다.

<p> 첫번째 문단 </p>
<hr>
<p> 두번째 문단 </p>
<hr>
<p> 세번째 문단 </p>

blockquote, q

-<blockquote>: 인용 블록

<blockquote>
  <p>피카피카!</p>
  <cite>포켓몬스터 피카츄</cite>
</blockquote>
  • <q>: 인용구(문장 내에서 사용)
<p><q>피카피카!<q>라고 피카츄가 외쳤다.<p>

main

  • 문서의 주요 콘텐츠를 표현하는 태그이다.
  • <main>에 들어가는 콘텐츠는 사이트 내에서 유일한 내용이여야 하며, 다른 페이지와 반복적, 공통적으로 들어가는 내용을 넣지 않는다.
  • IE(익스플로어)는 지원하지 않는다.
<main>
  <section></section>
  <section></section>
</main>

좋은 웹페이지 즐겨찾기