[HTML] HTML TAG

chooing·2022년 3월 29일

html 멋쟁이사자처럼 제주코딩베이스캠프

HTML

목록 보기

2/4

Document element & metadata

`<!DOCTYPE html>`

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

html

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

head

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

title

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

link

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

Sections

body

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

section, article

section

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

article

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

section vs article

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

<section>
  <article></article>
  <article></article>
</section>

특정한 컨텐츠의 시작 부분을 나타내는 요소로 일반적으로 구역의 제목(<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>
  <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>

chooing

멋찐 프론트엔드 개발자가 되기 위해 공부 중입니다

이전 포스트

[HTML] HTML Living Standard

다음 포스트