HTML - HTML 태그 (제목, 단락, 인용구, 서식)

728x90

HTML 태그

텍스트 크기/구분/위치 등에 영향주는 태그

태그명	empty tag	설명	예시 이미지
<h1>	X	(heading) 제목을 나타내는 태그 <h1> ~ <h6> 순서로 텍스트 크기 점점 작아진다. 위아래 자동 여백 들어간다. 검색엔진이 이 <h> 태그로 키워드 수집함.
<p>	X	(paragraph) 내용 구분하기 위한 문단, 단락을 나타내는 태그 텍스트 앞 뒤로 빈 줄이 생기면서 단락 만들어 진다. ※ br태그와 비슷하지만, 스타일 적용하려면 p태그 사용
<br>	O	(break line) 줄을 바꿔주는 태그 웹 문서의 텍스트는 Enter, 개행(\n) 넣어도 띄워지지 않으며, 여러번의 Spacebar도 1번으로 인식된다. 줄을 바꿔주고 싶을때 br 태그 사용.
<pre>	X	(preformatted text) 우리가 알던 평소방식 그대로 텍스트 표현하는 태그 HTML 코드에서도 평소처럼 띄워쓰기, 줄 나누기 하고 싶을때 사용. 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동변환
<hr>	X	(horizontal rule) 수평 가로 구분선을 추가

태그명	empty tag	설명	예시 이미지
<q>	X	(quotation) 짧은 인용구를 표현한다. 자동으로 큰따옴표 붙음
<blockquote>	X	(blockquote) 블록 인용문을 표현하는 태그 별도 단락으로 구분되어진다.

텍스트에 다양한 효과주는 여러 태그

태그명	empty tag	설명	예시 이미지
<strong> <b>	X	(strong) (bold) 텍스트를 굵게 표시합니다. <strong>은 경고, 주의사항 같은 중요 내용 강조할 때 <b>는 단순히 글자를 굵게 표시할 때 사용
<mark>	X	(highlighted or marked text) 노란색 형광효과
<em> <i>	X	(emphasis) (italic) 텍스트를 기울여 표시합니다. <em>은 문장에서 내용 강조하고 싶을 때 <i>는 단순히 글자 기울이고 싶을 때 사용
<abbr>	X	(abbreviation) 줄임말, 축약어를 표시합니다. 택스트에 마우스 위치시키면 작은 툴팁이 나온다.
<cite>	X	(cite) 인용 내용을 표시합니다.
<code>	X	(code) 컴퓨터 인식을 위한 소스 코드를 표시합니다.
<small>	X	(small) 글자를 작게 표시합니다.
<sub>	X	(Subscript) 아래 첨자를 표시합니다. 화학식 등을 표현할때 사용 (H2O)
<sup>	X	(Superscript) 위 첨자를 표시합니다. 수학식, 단위 등을 표현할때 사용 (㎡)
<s>	X	(Strikethrough) 취소선을 표시합니다. 이것
<u>	X	(Underline) 밑줄을 표시합니다. 이것
<ins>	X	(insert) 공동 작업 문서에서 새로운 내용 삽입합니다.
<del>	X	(delete) 공동 작업 문서에서 기존 문서내용 삭제합니다.
<address>	x	(address) 주소를 표현합니다. 이탤리체로 표현되며, 위아래 자동 공백 삽입

코드 설명이나 디버깅 위해 작성한 구문.

웹 브라우저에 표현되지 않음. 소스보기에는 나타남.

<!-- 주석내용 -->

<!--
    주석내용
    ...
-->