mir.pe (일반/밝은 화면)
최근 수정 시각 : 2024-11-25 23:55:05

HTML/태그


파일:상위 문서 아이콘.svg   상위 문서: HTML
프로그래밍 언어 문법
{{{#!wiki style="margin: -16px -11px; word-break: keep-all" <colbgcolor=#0095c7><colcolor=#fff,#000> 언어 문법 C( 포인터 · 구조체 · size_t) · C++( 자료형 · 클래스 · 이름공간 · 상수 표현식 · 특성) · C# · Java · Python( 함수 · 모듈) · Kotlin · MATLAB · SQL · PHP · JavaScript · Haskell( 모나드)
마크업 문법 HTML · CSS
개념과 용어 함수( 인라인 함수 · 고차 함수 · 람다식) · 리터럴 · 상속 · 예외 · 조건문 · 참조에 의한 호출 · eval
기타 #! · == · === · deprecated · NaN · null · undefined · 배커스-나우르 표기법
프로그래밍 언어 예제 · 목록 · 분류 }}}

1. 개요2. 기본 구조3. 텍스트 관련4. 목록 관련5. 링크, 이미지 관련6. 테이블 관련7. 폼8. 멀티미디어9. 외부 페이지 삽입10. 프레임11. 기타12. 시맨틱 태그
12.1. 레이아웃 태그
12.1.1. 예시
12.2. 멀티미디어 태그12.3. 폼 관련12.4. 기타 태그12.5. 용도가 바뀐 태그12.6. 사용 불가 태그
13. 지원이 부실한 태그14. 비권장 태그
14.1. 표준에서 제외된 태그14.2. 그 외 채택이 거부된 태그

1. 개요

2. 기본 구조

<!DOCTYPE html>}}} <body bgcolor="pink" text="navy" link="#ff0055" vlink="#5500ff" alink="#ff00ff">}}}
이렇게 쓰면 배경색은 핑크, 글자색은 파랑, 링크색은 진분홍, 방문링크색은 보라, 활성링크색은 자주색으로 표시된다. 하지만 HTML5에서는 이렇게 지정하는 것을 지원하지 않기 때문에 다음과 같이 CSS로 대체해야 한다. 또한, 기존의 <body> 태그의 자체 속성으로는 링크에 마우스 커서를 댔을 때의 색상이나 링크의 밑줄 유무 등의 지정이 불가능하다. 하지만 이것도 CSS의 힘을 빌리면 얼마든지 가능하다.
{{{#!syntax css
body {
background-color: pink;
color: navy;
}
a:link {
color: #ff0055;
text-decoration: none; /* 링크의 밑줄을 없앤다. 이는 body 태그의 자체 속성으로는 불가능하다. */
}
a:visited {
color: #5500ff;
text-decoration: none;
}
a:active {
color: #ff00ff;
text-decoration: none;
}
a:hover {
/* 마우스 커서를 가져다 대면 링크가 짙은 하늘색으로 변하면서 사라졌던 밑줄이 다시 생긴다.
이는 body 태그의 자체 속성으로는 불가능하다. */
color: #0055ff;
text-decoration: underline;
}
}}}
물론 이렇게 하면 body 영역 외에 있는 a태그에도 속성이 적용되지만 눈에 보이는 HTML의 모든 요소는 body 안에 있기 때문에 상관없다.

3. 텍스트 관련

<h1>1단계</h1>
<h2>2단계</h2>
<h3>3단계</h3>
<h4>4단계</h4>
<h5>5단계</h5>
<h6>6단계</h6>}}}
1단계
2단계
3단계
4단계
5단계
6단계
<p>이 밑에 빈 공간이 있습니다.</p>
<p>이 위에 빈 공간이 있습니다.</p>
}}}
이 밑에 빈 공간이 있습니다.
(빈 공간)
이 위에 빈 공간이 있습니다.
<b>굵게 표시됩니다.</b>
<i>기울임꼴로 표시됩니다.</i>
<strong>강하게 강조합니다.</strong>
<em>약하게 강조합니다.</em>}}}
굵게 표시됩니다.
기울임꼴로 표시됩니다.
강하게 강조합니다.
약하게 강조합니다.
<ins>밑줄이 표시됩니다.</ins>
<del>취소선이 표시됩니다.</del>
<s>나도 취소선</s>
밑줄이 표시<u>됐</u>습니다.}}}
밑줄이 표시됩니다.
취소선이 표시됩니다.
나도 취소선
밑줄이 표시됐습니다.
E=MC<sup>2</sup>
H<sub>2</sub>O는 산소가 아닌 물입니다.
YP<sub>B</sub>P<sub>R</sub>}}}
E=MC2
H2O는 산소가 아닌 물입니다.
YPBPR
나무위키는 위키위키입니다.
<small>그렇군요.</small>}}}
나무위키는 위키위키입니다.
그렇군요.
이 밑에 가로줄이 있습니다.
<hr>
이 위에 가로줄이 있습니다.}}}
이 밑에 가로줄이 있습니다.
이 위에 가로줄이 있습니다.
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
}}}
[ruby(漢字, ruby=かんじ)]

4. 목록 관련

<ul>
　　<li>순서가 없는 첫번째 항목입니다.</li>
　　<li>순서가 없는 두번째 항목입니다.</li>
</ul>}}}
* 순서가 없는 첫번째 항목입니다.
* 순서가 없는 두번째 항목입니다.
<ol>
　　<li>순서가 있는 첫번째 항목입니다.</li>
　　<li>순서가 있는 두번째 항목입니다.</li>
</ol>}}}
1. 순서가 있는 첫번째 항목입니다.
1. 순서가 있는 두번째 항목입니다.
<ul>
　　<li>첫 번째</li>
　　<li>두 번째
　　　　<ul>
　　　　　　<li>두 번째 속 첫 번째</li>
　　　　　　<li>두 번째 속 두 번째</li>
　　　　</ul>
　　</li>
</ul>}}}
* 첫 번째
* 두 번째
* 두 번째 속 첫 번째
* 두 번째 속 두 번째
<ul>
　　<li>가나다</li>
　　<li>라마바
　　　　<ol>
　　　　　　<li>사아자</li>
　　　　　　<li>차카타</li>
　　　　</ol>
　　</li>
　　<li>파하</li>
</ul>}}}
* 가나다
* 라마바
1. 사아자
1. 차카타
* 파하

5. 링크, 이미지 관련

<a href="https://namu.wiki">나무위키:대문</a>}}}
나무위키:대문
주의할 점이라면 <a> 안에 또 <a>를 겹쳐서 넣어서는 안 된다는 점이다. 다음은 <a> 태그의 잘못된 사용 예이다.[7]
{{{#!syntax xml
<a href="https://namu.wiki">나무위키:대문 <a href="https://www.google.com/">구글</a></a>}}}
위 태그를 교정하면 다음과 같다.
{{{#!syntax xml
<a href="https://namu.wiki">나무위키:대문</a> <a href="https://www.google.com/">구글</a>}}}
페이지 내의 책갈피를 위한 속성으로 name이 있었으나, id로 대체 가능하여 HTML5에서는 폐기되었다.
<img src="/w/파일:나무위키:로고1.png"
alt="파일:나무위키:로고1.png" title="파일:나무위키:로고1.png" width="200px">}}}
파일:나무위키:로고1.png

6. 테이블 관련

<table>
　　<tr>
　　　　<td>A1</td>
　　　　<td>B1</td>
　　　　<td>C1</td>
　　</tr>
　　<tr>
　　　　<td>A2</td>
　　　　<td>B2</td>
　　　　<td>C2</td>
　　</tr>
</table>}}}
A1 B1 C1
A2 B2 C2
<table>
　　<tr>
　　　　<th>A</th>
　　　　<th>B</th>
　　　　<th>C</th>
　　</tr>
　　<tr>
　　　　<td>A1</td>
　　　　<td>B1</td>
　　　　<td>C1</td>
　　</tr>
</table>}}}
A B C
A1 B1 C1
<table>
　　<tr>
　　　　<th> </th>
　　　　<th>월</th>
　　　　<th>수</th>
　　　　<th>금</th>
　　</tr>
　　<tr>
　　　　<th>1교시</th>
　　　　<td rowspan="2">국어</td>
　　　　<td>수학</td>
　　　　<td>영어</td>
　　</tr>
　　<tr>
　　　　<th>2교시</th>
　　　　<! 병합되었으므로 쓰지 않습니다. >
　　　　<td>과학</td>
　　　　<td>사회</td>
　　</tr>
</table>}}}
월 수 금
1교시 국어 수학 영어
2교시 과학 사회

7. 폼

CGI( PHP, ASP, JSP 등)와 상호작용하기 위해 입력값을 받는 역할을 한다.

8. 멀티미디어

9. 외부 페이지 삽입

10. 프레임

11. 기타

12. 시맨틱 태그

HTML5에서는 시맨틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다. 이러한 태그들을 시맨틱 태그라고 한다.

사실 기존 HTML 표준에서도 각 태그는 대부분 의미를 가지고 있었다. 그러나 의미를 가진 태그가 부족한 편이었고, 의미가 불명확한 태그나 시대의 흐름에 뒤처진 태그도 있었다. 2000년대 초반까지만 해도 테이블 관련 태그로 웹 페이지를 여러 구획으로 나눠서 레이아웃을 만드는 방식인 테이블 레이아웃(Table Layout)이 일반화되어 있었다.[12] 당시 CSS가 나온지 얼마 되지 않은데다 HTML의 기능이 부족할 때 레이아웃을 짜던 방식이 그대로 이어진 것이 원인이었다. 이에 2000년대 초반부터 시맨틱 웹이 중시되면서 HTML은 문서 구조와 의미, CSS는 디자인으로 확연히 분리되고, 테이블 레이아웃은 박스 모델 레이아웃으로 변화되었다. 그러나 당시 표준이었던 HTML 4.01과 XHTML 1.0으로는 시맨틱 웹을 구현하기가 난점이 있었다. 문서 내에 들어가는 목록이나 강조 등의 미시적인 부분에는 의미가 있었지만, 레이아웃에서 이게 메뉴인지 메인 컨텐츠인지 서브 컨텐츠인지 분류할 수 있는 태그는 없었다. 이 때문에 레이아웃에서 각 영역을 지정하는 태그는 <div>가 대단히 많이 쓰였고, 이 당시 박스 모델을 적용한 HTML 문서는 수십 개로 중첩된 복잡한 <div> 지옥(...)인 경우가 많았다.[13] 이 때문에 HTML5에서 관련 태그를 추가한 것이다.

시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게하고, 궁극적으로 시각장애인에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.

기존 태그는 일부분을 제외하고는 HTML 4.01에서 사용되던 태그가 거의 그대로 사용된다. 원래 HTML을 표준에 맞게 사용했다면 큰 어려움 없이 HTML5에도 적응할 수 있다.

12.1. 레이아웃 태그

12.1.1. 예시

레이아웃 태그를 사용한 HTML5 마크업의 기초 뼈대는 다음과 같다.
파일:html5ex.png 

#!syntax xml
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>[페이지 제목]</title>
	</head>
	<body>
		<header>
			<h1>[사이트 제목]</h1>
			<h2>[사이트 부제목]</h2>
			<nav>
				<ul>
					<li>[메뉴1]</li>
					<li>[메뉴2]</li>
					<li>[메뉴3]</li>
				</ul>
			</nav>
		</header>
		<main>
			<article>
				<p>[본문 내용]</p>
			</article>
		</main>
		<aside>
			[사이드바 내용]
		</aside>
		<footer>
			<address>[주소 내용]</address>
		</footer>
	</body>
</html>

12.2. 멀티미디어 태그

12.3. 폼 관련

12.4. 기타 태그

12.5. 용도가 바뀐 태그

12.6. 사용 불가 태그

대개 시맨틱 웹에서 사용을 지양하는 태그라든가, 특정 브라우저에서만 작동하는 태그가 속한다.


파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는
문서의 r256 판
, 4.2번 문단
에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r256 판 ( 이전 역사)
문서의 r 판 ( 이전 역사)

13. 지원이 부실한 태그

이 분류에는 지원이 부실한 태그를 넣는다.

14. 비권장 태그

사용하지 않는 것이 권장되는 태그. 이 분류에는 많이 사용하였지만, HTML5에서 제거된 태그 등이 들어간다. 앞으로의 홈페이지 제작에서는 사용하지 않는 것을 추천한다.

14.1. 표준에서 제외된 태그

다음은 다른 태그나 CSS로 대체할 수 있어 폐기되었거나 사용성이나 접근성 등에 문제가 있어 배제된 태그들이다.

14.2. 그 외 채택이 거부된 태그

다음은 기존의 비표준 태그들로 HTML5에서 표준으로 채택되지 않은 태그들이다.
[1] 나무위키에서도 쓸 수 있지만 지원이 중단될 수 있는 비권장 문법이니 되도록이면 나무위키 엔진에서 사용하는 자체 문법을 사용하는 것이 권장된다. [2] 홈페이지 제목과 같이 나오는 아이콘 [3] 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다. [4] 가끔 디시인사이드 같은 사이트에서 복사를 잘못할 시 높은 확률로 볼 수 있다(...) [5] 점선 밑줄이 생기지 않을 경우 CSS에 abbr[title] {border-bottom: 1px dotted;} 를 추가해야 한다. [6] 루비 문자라고도 한다. [7] 다만 Pale Moon 브라우저 기준으로는 정상적으로 렌더링한다. [8] 이미지의 링크가 깨졌을 때, 텍스트 전용 브라우저(Lynx 등)로 페이지를 열람할 때, 시각장애로 인해 TTS나 점자 등 비시각적인 요소에 의존하여야 할 때, 검색 엔진에서 크롤링할 때 등이 이에 속한다. [9] IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다. [10] Flow content, but with no form element descendants. WHATWG spec, the-form-element [11] 그렇다고 이 데이터를 그대로 믿으면 안된다. 얼마든지 개발자 도구나 프록시 툴 등으로 수정될 수 있다. [12] 대한민국의 유해사이트 차단 사이트인 warning.or.kr 소스를 보면 여전히 테이블레이아웃이다. 정말 body 바로 아래 table태그와 tr태그와 td태그가 전부. [13] 그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다. [14] 이는 이런저런 어른의 사정 때문에 빚어진 현상. video 태그는 더 심하다. [15] <object> 태그는 일일이 외우기도 힘든 형식(classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 같은 식)으로 된 개체 형식 코드값을 넣어야 했다! 다행히도 HTML5에서는 classid가 삭제되면서 type으로 대체할 수 있게 되었다. [16] <kbd>는 키보드 입력을 정의하기 위한 태그, <code> 태그는 컴퓨터 코드를 정의하기 위한 태그, <samp> 태그는 화면 출력 내용을 정의하기 위한 태그.

분류