HTML/태그
덤프버전 :
분류
1. 개요[편집]
- HTML은 웹 브라우저마다 지원하는 태그가 조금씩 다르며, 같은 태그라도 작동하는 방법이 다르지만 대체로 비슷한 태그를 지원한다.[1]
- W3C HTML 및 WHATWG HTML Living Standard 각각의 최신 버전을 기준으로 하며, 한 쪽이 지원하지 않는 경우는 이를 표시한다.
- 태그 목록 #
2. 기본 구조[편집]
-
: 마크업 언어용 DTD#Document Type Definition 태그이다. HTML5의 경우 맨 위에 다음과 같이 써 주면 된다.
-
: HTML이 작용하는 범위를 지정하는 태그로 위의 DTD를 제외한 전체를 이 태그로 둘러싼다. -
: HTML 문서의 속성 범위를 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다. -
: HTML 문서의 본문 범위를 지정하기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다. 속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색 이렇게 6가지가 있었으나 CSS가 도입되면서부터 굳이 body 태그에 직접 속성을 지정해야 할 이유가 사라졌고 HTML5에서부터 지원하지 않게 되었다. 예를 들어, HTML 4.01 시절엔 body 태그를 다음과 같은 형식으로 쓸 수 있었다.
이렇게 쓰면 배경색은 핑크, 글자색은 파랑, 링크색은 진분홍, 방문링크색은 보라, 활성링크색은 자주색으로 표시된다. 하지만 HTML5에서는 이렇게 지정하는 것을 지원하지 않기 때문에 다음과 같이 CSS로 대체해야 한다. 또한, 기존의
태그의 자체 속성으로는 링크에 마우스 커서를 댔을 때의 색상이나 링크의 밑줄 유무 등의 지정이 불가능하다. 하지만 이것도 CSS의 힘을 빌리면 얼마든지 가능하다.
물론 이렇게 하면 body 영역 외에 있는 a태그에도 속성이 적용되지만 눈에 보이는 HTML의 모든 요소는 body 안에 있기 때문에 상관없다. -
: HTML의 제목을 선언하는 태그. -
: HTML의 부가 정보를 선언하는 태그. 예를 들어 charset 속성을 쓰면 인코딩을 선언할 수 있다. -
: 외부 CSS 파일, 파비콘[2] 등을 연결하는 태그.
3. 텍스트 관련[편집]
-
: 제목 태그(
~
)를 그룹으로 묶기 위한 태그이다. 대체로 제목과 소제목을 묶는다. 이 태그는 W3C HTML 스펙에서 제외되었다. hgroup 태그는 현재 브라우저 상에서 아무런 역할을 하지 않고 단지 div 비슷하게 동작하기 때문에, 다른 태그로 대체하여도 크게 상관은 없다. W3C는 header 태그로 대체할 것을 권장하고 있다. -
: 제목(heading)을 표시할 때 사용된다.
이 가장 크고
이 가장 작다. 크기는 브라우저마다 표시하는 방법이 달라 다르게 나타날 수 있다. CSS를 쓰면 크기, 색상, 폰트 등을 변경할 수 있다.
은 한 문서 안에 하나만 사용하는 것을 권장한다.
1단계
2단계
3단계
4단계
5단계
6단계
-
: 새 문단(paragraph)을 연다.
로 닫는다. 극초창기에는 후술할
태그처럼 닫는 태그가 없고 단순히 문단을 구분하는 역할만 했는데 HTML 2.0에서 닫는 태그가 추가되어 문단을 묶어주는 역할을 하게 되었다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에
을 선호하는 경우가 많은데, 문단이라면
태그로 묶어주는 것이 올바른 사용법이다. 빈 공간은 CSS를 지정해서 없앨 수 있다.
이 밑에 빈 공간이 있습니다.
(빈 공간)
이 위에 빈 공간이 있습니다.
-
: 두껍게(bold) 효과를 준다. 그러나 HTML 4.01부터 비권장 태그로 들어갔는데, 이 이유는 이 태그가 비주얼적인 효과를 주기 위한 태그라 비권장으로 지정된 것. 강조의 의미를 줄 때는
태그로 대체하고 그 이외에는 CSS의 font-weight: bold; 속성으로 쓸 것을 권장하고 있다.[3] 하지만 HTML5에서
보다 약한 의미의 강조로 다시 복귀했다. -
: 텍스트를 기울임꼴(italic)로 표시한다. 기술 용어, 외국어, 일반적으로 기울임꼴로 사용되는 용어 등을 강조한다. -
: 포함된 텍스트를 강하게 강조할 때 사용한다. -
:
보다 약한 강조를 나타낼 때 사용한다.
굵게 표시됩니다.
기울임꼴로 표시됩니다.
강하게 강조합니다.
약하게 강조합니다.
-
: 문서에 삽입(insert)된 텍스트, 즉 밑줄을 표시한다. -
: 문서에서 삭제(delete)된 텍스트, 즉 취소선을 표시한다. -
: 취소선(strikethough)을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서
보다는 약한 삭제의 의미로 변경되면서 존치되었다. -
: 밑줄(underline)을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서
와는 구별되는 의미로 변경되면서 존치되었다. 주로 철자 오류를 지적하는 데 쓴다.
밑줄이 표시됩니다.취소선이 표시됩니다.나도 취소선
밑줄이 표시됐습니다.
-
: 텍스트를 위첨자(superscript)로 표시한다. -
: 텍스트를 아래첨자(subscript)로 표시한다.
E=MC2
H2O는 산소가 아닌 물입니다.
YPBPR
-
: 텍스트를 조금 더 작게 표시한다.
태그가 HTML5 규격에서 제외된 것과는 달리
태그는 존치되어 있다. 주로 저작권 정보나 주석을 조그맣게 다는 데 쓴다.
나무위키는 위키위키입니다.
그렇군요.
-
: 문단 내 줄바꿈(line break). 강제개행을 하는 태그이다. 문단의 흐름을 해치기 때문에 권장되는 태그는 아니다.[4] -
: 가로줄(horizontal rule)을 넣는다. HTML5에서는 주제 분리 요소 기능이 더해졌지만, 시각적으로는 차이가 없다.
이 밑에 가로줄이 있습니다.
이 위에 가로줄이 있습니다.
-
: 약어를 이 태그로 묶어서 무엇의 약어인지 설명하기 위한 태그이다.
식으로 써서 마우스 커서를 대면 설명이 떠서 읽을 수 있게 한다. 사용법은 이 곳을 참고. 원래는 특별한 시각적 효과를 부여하려면 CSS를 사용해야 했지만 구글 크롬과 파이어폭스에서는 언제부터인가 CSS를 지정하지 않더라도 자동으로 점선 밑줄이 생기게 되었다.[5]약어
-
: 글이 길어질 때 띄어쓰기가 없더라도 이 태그가 쓰인 부분에서 자동개행이 이루어진다. 예를 들어,
이라고 쓰면 개행되지 않을 때는 'JavaProgramming'으로 붙어서 나오지만 자동개행시Java
Programming
태그 앞뒤로 위치한 'Java'와 'Programming'이 서로 분리될 수 있다. 원래는 개행을 방지하는 비표준 태그
안애서
태그와 같은 기능을 하는 태그였으나 HTML5에서 표준으로 채택되면서 기능이 변경된 것. 코더들 사이에서 이 태그와 SHY 중 무엇을 써야 할 지 의견이 분분하다.
다만 한글은 글자 단위로 개행이 되기 때문에 한글에다가 이 태그를 쓸 필요성은 거의 없다.
-
: 인용구를 기술하는 태그이다. 기본적으로 들여쓰기가 되어 있는데 CSS로 없앨 수 있다. -
:
의 인라인 버전. -
: 후술할
의 인라인 버전. -
: 서식 있는(Preformatted) 텍스트를 넣기 위한 태그이다. 이 태그 안에는
태그 없이 개행하더라도 개행을 인식하고 공백 문자가 두 개 이상 연속으로 있어도 하나로 취급하지 않고 그대로 표시된다. 또한, 일반적으로 이 태그 안에 들어간 텍스트는 고정폭 글꼴로 표시된다. 이 태그 안에 다른 태그를 넣으면 경우에 따라 의도치 않게 표시될 수도 있으므로 가급적이면 다른 태그를 넣지 않는 것이 좋다. -
,
,
,
: 변수 등 프로그래밍 언어와의 연계를 위한 태그. -
: 후리가나[6] 표기에 쓰이는 기본 태그. 절대 Ruby를 프로그래밍하기 위한 태그가 아니다!-
: 후리가나가 지원되지 않는 환경에서 표기할 텍스트를 지정한다. -
: 후리가나를 쓴다. -
: 합성어 등으로 후리가나가 여러 단어로 이루어지는 경우 등에 후리가나 영역을 지정하는데 쓰인다. W3C HTML 표준이나 WHATWG HTML Living Standard 표준이 아니다. -
: 후리가나의 의미적 주석을 넣는다. W3C HTML 표준이나 WHATWG HTML Living Standard 표준이 아니다.
-
漢字
4. 목록 관련[편집]
-
: 순서 없는 목록(unordered list)을 표시한다. -
: 목록에서 각 항목(list item)은
와 사이에 넣는다.
* 순서가 없는 첫번째 항목입니다.
* 순서가 없는 두번째 항목입니다.
-
: 순서 있는 목록(ordered list)을 표시한다. 참고로 이 태그는 단지 비주얼적인 태그라는 이유로 HTML4에서 비권장 태그로 들어갔다가 HTML5에서
태그와 구별해서 사용할 필요성이 제기되면서 표준 태그로 재지정되었다.
1. 순서가 있는 첫번째 항목입니다.
1. 순서가 있는 두번째 항목입니다.
- 참고1:
와 사이에 또 목록을 넣으면 하위 목록도 가능하다.
* 첫 번째
* 두 번째
* 두 번째 속 첫 번째
* 두 번째 속 두 번째
- 참고2:
안에 하위 목록으로
을 넣을 수도 있다. 물론 반대로
안에 하위 목록으로
을 넣는 것도 가능하다.
* 가나다
* 라마바
1. 사아자
1. 차카타
* 파하
-
: 정의 목록(definition list)을 표시한다. -
: 정의 목록의 정의(definition term)를 기술한다. -
: 정의 목록의 뜻풀이(definition description)를 기술한다. 기본적으로 들여쓰기가 되어 있는데 CSS로 없앨 수 있다. -
: 웹사이트 내의 상호작용하는 메뉴 목록을 위한 태그이다.
의 경우 본래
태그와 별반 차이가 없다는 이유로 폐기되었다가 HTML5.1에서 다시 표준으로 부활하였으나, W3C HTML5.2에서 재차 폐기되었다. 단, WHATWG HTML Living Standard에서는 계속 표준으로 정하고 있다.- type: toolbar와 context가 정의되어 있었으나 W3C HTML5.2에서 폐기, WHATWG HTML Living Standard에서도 폐기되었다.
- label: 메뉴가 중첩된 경우 메뉴 이름을 지정하는 속성이다. W3C HTML5.2에서 폐기, WHATWG HTML Living Standard에서도 폐기되었다.
5. 링크, 이미지 관련[편집]
-
: 하이퍼링크를 생성하는 태그이다. Anchor의 줄임말이다. href 속성을 써서
와 같이 작성한다.내용
위 태그를 교정하면 다음과 같다.
페이지 내의 책갈피를 위한 속성으로 name이 있었으나, id로 대체 가능하여 HTML5에서는 폐기되었다.
- 보통
태그를 사용하면 페이지가 헤더 등을 남기지 않고 싹 새로 로드되는데, React와 같은 프레임워크를 사용하면 필요한 부분만 새로고칠 수 있다.a
-
: 페이지에 이미지를 추가하는 태그이다.- src: source의 약자로 이미지파일의 경로를 지정하는 태그 속성이다.
- http:// 또는 https://: 절대경로 URL로 지정한다.
- path/to/image/file: 상대경로로 지정한다.
- data:image/jpeg|png|gif;base64, A1bC2dE3fG...: 파일을 base64로 인코딩한 형태로 지정한다. 작은 여러 개의 파일이 있을 경우 권장하며, 큰 파일은 절대 권장하지 않는다.
- alt: 이미지를 볼 수 없는 경우[8] 에 이미지에 대한 설명을 제공한다.[9] 이 속성값이 없어도 이미지파일의 경로가 유효하다면 표시되기는 하지만 웹표준 검사기에서 걸린다.
- title: 이미지에 대한 추가 정보를 제공한다. 로고 이미지에 마우스를 갖다대면 말풍선으로 뜨는 것을 확인할 수 있다.
- height, width: 이미지의 세로, 가로폭을 지정한다. HTML 4.01까지는 그냥 숫자만 쓰면 픽셀로, 뒤에 %를 붙이면 백분율로 지정할 수 있었으나, HTML5에서는 픽셀로만 지정할 수 있게 되었으므로 백분율로 지정하려면 CSS를 이용해야 한다.
- src: source의 약자로 이미지파일의 경로를 지정하는 태그 속성이다.
-
: 페이지에 SVG 형식의 그래픽을 추가하는 태그이다. SVG 파일은 위의
태그로 넣어도 되지만 SVG 파일이 XML 형식으로 만들어져 있기에 별도의 SVG 파일을 만들지 않고 직접 코딩해서 넣는 것도 가능하다. 이 때
태그를 사용한다. -
: 페이지에 진행 상황 막대를 추가하는 태그이다. 예를 들어
와 같이 쓸 경우 22% 진행된 막대가 표시된다. 예시 -
: 최신 HTML Living Standard에 추가된 이미지 태그로
태그와
태그에 대응한다. 다양한 환경에서 서로 다른 이미지를 띄울 수 있게 한다. W3C HTML 표준에 반영되어 있지 않다.