[2023.03.02] 3. 텍스트와 관련된 태그 정리

🔍HTML에 존재하는 수많은 태그들을 알아보자. 상당히 길어질 것 같다...

 

h1, h2, h3, h4, h5, h6

• Heading: 제목
• 웹 페이지를 하나의 책이라고 생각하면 제목 태그는 목차와 같다!
• HTML 논리 구조에서 매우 중요한 태그.
• 검색엔진은 h 태그에 기반하여 결과물을 보여준다.
  제목 태그를 잘 작성해 검색엔진에 노출이 잘 되게 하는 것도 고려해야한다!

주의할 점

• h1 태그는 한 페이지에 한번만 사용할 것을 권장.
• 스타일의 목적으로 h 태그를 사용하지 말것!
• h1 ~ h6은 순서대로 작성해야 한다.

<!-- OK -->
<h1>대한민국</h1>
<h2>부산</h2>
	<h3>서면</h3>
	<h3>해운대</h3>
	<h3>명지</h3>
<h2>광안리</h2>
	<h3>광안리 해수욕장</h3>
	<h3>광안대교</h3>
    
<!-- X -->
<h1>대한민국</h1>
	<h3>서면</h3> <!-- X -->
<h2>부산</h2>
	<h3>해운대</h3>
	<h3>명지</h3>
<h2>광안리</h2>
		<h4>돼지국밥</h4> <!-- X -->
	<h3>광안대교</h3>

 

 

<a>

• href: hypertext reference (경로참조)
  
  • tel: 전화번호
  • mailto: 이메일주소
• target 속성값
  • _self: 현재 페이지(기본값)
  • _blank: 새 탭
  • _parent: 부모 페이지, 부모가 존재하지 않으면 _self와 동일
  • _top: 최상위 페이지
• download: 링크 이동 대신 사용자에게 URL을 저장할 지 물어본다.
  인터넷 익스플로러는 download 속성을 지원하지 않는다.
• 인라인 요소이다.
• 예외적으로 블록 요소들을 감쌀 수 있다.
• href 속성과 id를 사용하여 페이지 내에서 이동하는 해시 링크를 만들 수 있다.

See the Pen Untitled by astinaus (@astinaus) on CodePen.

 

 

 

<p>

• paragraph의 약어로 하나의 문단을 나타냄.
• HTML에서 문단은 이미지나 입력 폼 등 서로 관련 있는 콘텐츠는 무엇이나 될 수 있다.
• 블록 요소이다.

 

<br>

• break(line break)의 약어로 줄을 나눈다는 뜻
• HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한줄로 보임.
• 텍스트 안에서 줄 바꿈 처리를 해준다.
• 여백은 CSS로 적용하는 것이 좋다.(padding, margin)
• 화면에 따른 줄 바꿈 처리를 위해서 br 대신 span + css, wbr태그를 사용하여 처리하기도 함.

 

<wbr>

• 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냄.
• 한글의 경우 word-break:keep-all 속성과 함께 사용해야 한다.
  • word-break: 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀지 지정.
  • keep-all: 한중일 텍스트에서는 줄을 바꿀때 단어를 끊지 않는다. 한중일 텍스트가 아니라면 normal과 같다.

 

<code>

<code>push()<code>

• 짧은 코드 조각(한 줄)을 나타낼 때 사용
• 텍스트의 고정 폭 글꼴을 사용.

 

 

<pre>

• HTML에 작성한 내용 그대로를 표현.
• 텍스트는 고정 폭 글꼴을 사용하고, 공백을 그대로 유지
• 공백이 필요한 코드 혹은 텍스트를 사용해 그림을 그릴 때 사용.

 

 

<strong>

• 중대하거나 긴급한 콘텐츠를 나타냄
• 단어 또는 문장
• 기본적으로 굵은 글씨가 적용됨

 

 

<b>

• 과거에 굵은 글씨 처리를 위해 사용
• 현재는 사용하지 않는 걸 권장함.

 

 

<em>

• Emphasis: 강조, 강한어조
• 텍스트의 강세를 나타낸다. 콘텐츠를 강조해서 읽었으면 하는 부분에 적용.
• 요소를 중첩하면 더 큰 강세를 뜻함.
• 기본적으로 기울임 꼴 적용.

 

<i>

• 기본적으로 기울임 꼴 적용.
• 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용.

 

strong, b, em, i 등을 굵기, 기울임 등의 스타일을 위해서 사용하지 않도록 하자!

 

 

<q>

• 짧은 인용문을 나타낸다.
• 줄 바꿈이 없이 짧은 경우에 사용.
• cite 속성을 사용하여 url을 넣어줄 수도 있다.

<p>When Dave asks HAL to open the pod bay door, HAL answers: 
	<q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">
		I'm sorry, Dave. I'm afraid I can't do that.
	</q>
</p>

 

<blockquote>

• 긴 인용문을 나타낸다.

<figure>
	<blockquote>
		<p>
        	어떤 사람은 과거의 기억을 되살려서 자기와 자기 몸을 학대한다. 
        	어떤 자는 아직 보지도 못한 죄가 두려워서 자기 자신에게 상처를 입힌다. 
        	어느 쪽도 어리석기 짝이 없는 것이다. 
        	과거는 이미 관계가 없어졌고, 미래는 아직 오지 않았으니까.
		</p>
	</blockquote>
	<cite>—세네카</cite>
</figure>

 

cite는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 한다.

 

 

<address>

• 해당 콘텐츠에 대한 연락처 정보
• 물리적 주소, URL, 이메일 주소, 전화번호, SNS 정보, 좌표 등
• 연락처가 가리키는 개인, 조직, 단체의 이름을 반드시 적어야 한다.
• 페이지 헤더 혹은 푸터에 배치하여 사업체에 연락 방법으로 사용할 수 있다.
• article 내에 사용해 글의 작성자를 나타낼 수도 있다.
• 연락처 외의 정보를 담아서는 안된다.

 

 

<mark>

형광펜으로 칠한 것처럼 표시된다.

하이라이트 텍스트를 정의할 때 사용

보통 검색 결과에 대한 시각적 효과를 위해 사용.

[출처 : https://developer.mozilla.org/ko/search?q=mark]

 

<abbr>

abbreviation: 약어 임을 나타내는 태그.

<p>
	<abbr>CSS</abbr> (Cascading Style Sheets)
	<abbr>HTML</abbr> (HyperText Markup Language)
</p>

<p>
	<abbr title="JavaScript">JS</abbr>
	<abbr title="Search Engine Optimization">SEO</abbr>
</p>

 

<dfn>

• 현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다.

<p>
	<dfn id="html">
		<abbr title="HyperText Markup Language">HTML</abbr>
	</dfn> 
	웹 페이지의 의미론과 구조를 만드는 데 사용되는 마크업 언어입니다.
</p>

• 본문 컨텐츠(a링크) - 정의 용어(dfn) id로 연결하여 각주 형태로 정리하면 좋을 것 같다.

<sup>

• 위 첨자 요소로 지수, 서수 표기를 위해 사용.

<p><var>a<sup>2</sup></var></p>
<p>English: 5<sup>th</sup></p>

 

<sub>

• 아래 첨자 요소로 각주, 변수, 화학식 등을 표기하기 위해 사용

CO<sub>2</sub>
<var>x<sub>1</sub></var>

 

<kbd>

• 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냄.

<p>크롬 브라우저 강력 새로고침 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></p>