[HTML] HTML TAG
Document element & metadata
<!DOCTYPE html>
- 반드시 문서 최상단에 선언을 해야한다.
- 문서의 타입에 대한 정보를 제공한다.
- 제거하면 브라우저는 쿼크 모드로 html을 랜더링하여 다르게 동작할 가능성이 있다.
html
- 최상위 요소로
lang="ko"을 통해 문서의 주 언어에 대해 설정한다.
- 언어 설정은 검색엔진과 스크린 리더의 작동에 영향준다.
- HTML 문서에 하나만 있다.
head
- 문서에 적용되는 메타데이터의 집합이다.
- HTML 문서에 하나만 있다.
title
- HTML 문서의 제목이다.
- HTML 문서에 반드시 하나만 있다.
link
<!DOCTYPE html>lang="ko"을 통해 문서의 주 언어에 대해 설정한다.외부의 자원을 문서와 연결한다.
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
ol 순서가 있는 목록, 각 항목은 li로 표현한다. start="숫자"을 넣는다.value="숫자" 값을 넣는다.<ol start="3">
<li>one</li>
<li value="9">two</li>
<li>three</li>
</ol>
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>Author And Source
이 문제에 관하여([HTML] HTML TAG), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chumil7432/멋사FE-2DHTML-TAG-3n1k65rw저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
