1. Text Formatting 태그
<b> Bold text </b><br>
<strong> Strong text </strong><br>
<i> Italic text </i><br>
<em> Emphasized text </em><br>
<mark> Marked text </mark><br>
<small> Smaller text </small><br>
<del> Deleted text </del><br>
<ins> Inserted text </ins><br>
text <sub> Subscript text </sub><br>
text <sup> Superscript text </sup><br>- style attributes로도 텍스트의 스타일들을 바꿀 수 있지만, text formatting 요소들로도 텍스트의 스타일을 바꿀 수 있다.
1. <b>: 텍스트가 굵게 표시되지만 특별한 의미는 X
2. <strong>: 의미적으로 중요한 텍스트임을 표시. 검색엔진이 중요한 텍스트로 인식할 수 있음
3. <i>: 기울임. 주로 기술 용어(Technical term), 외국어 표현, 생각이나 내면의 소리, 선박/항공기 등의 이름 등을 표시할 때 사용
4. <em> 강조. 의미적으로 중요한 텍스트를 기울임. <i>와 다르게 의미적으로도 강조되어 화면낭독기에서도 강조됨
5. <sub>/<sup> 아래 첨자와 위 첨자
2. 인용 및 인용 출처 태그
1) 인용문
<h3> Block Quote 긴 인용문 </h3>
<p>As Albert Einstein once said:</p>
<blockquote cite="https://www.example.com/einstein-quotes">
"Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>
<h3> Inline Quote 짧은 인용문 </h3>
<p>Steve Jobs once said: <q>Stay hungry, stay foolish.</q></p>
- Block Quote의 경우 기본적으로 들여쓰기가 적용되며 Inline Quote의 경우 브라우저가 자동으로 인용부호("")를 추가한다.
- cite 속성을 사용해서 출처를 명시할 수 있는데, 사용자가 직접 속성값을 보지는못하지만, SEO 및 접근성 향상에 도움을 준다.
2) 출처
<h3> Citation 출처 </h3>
<p>The book <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.</p>
- 책, 논문, 영화, 노래, 웹사이트 등의 출처를 표시할 때 사용되며 주로 이탤릭체로 표시한다.
- 사람의 이름에는 사용하지 않는다.
3) 약어
<h3> Abbereviation 약어 </h3>
<p><abbr title="World Health Organization">WHO</abbr> is an international health agency.</p>
- title 속성을 통해 마우스 커서를 올려놓았을 때 어떤 단어의 약어인지 표시할 수 있다.
- 브라우저나 서치엔진, 번역 시스템에 약어에 대한 정보를 제공할 수 있다.
- title 속성 없이 <abbr>이라는 태그 만으로 이 단어가 약어임을 의미적으로 표시할 수도 있기는 하지만 사용자가 실제 의미를 알 수 없기 때문에 title 속성을 추가하는 것이 좋음
4) 주소
<h3> Address 주소 </h3>
<address>
Written by Dried min.<br>
Visit us at: https://driedmin.tistory.com <br>
Korea
</address>
- 연락처 정보를 표시할 때 사용된다.
- 기본적으로 이탤릭체로 표시되며 address 요소를 표시하기 전 브라우저는 기본적으로 줄바꿈을 한다.
5) 텍스트 방향
<h3> Bidirectional Override 텍스트 방향 </h3>
<p>Normal text: Hello</p>
<p>Reversed text: <bdo dir="rtl">Hello</bdo></p>
- 텍스트의 기본 방향을 강제로 변경할 수 있다. rtl은 right to left
- 아랍어, 히브리어처럼 기본적으로 RTL인 언어를 표시할 때 / RTL 언어에서 LTR 텍스트를 올바르게 표시할 때 사용할 수 있다.
- <bdi> 태그를 통 텍스트 방향을 자동으로 감지하여 적용할 수 있다. (브라우저가 결정해줌)
3. HTML 주석
<!-- 주석처리 -->
- 브라우저는 주석을 렌더링하지 않아 브라우저에 출력되지 않는다. 오직 코드 작성자만 확인할 수 있다.
- 코드의 가독성을 높이고, 협업할 때 유용하다.
- 특정 코드를 일시적으로 비활성화할 때 사용할 수도 있다. (주석 안에서 태그를 사용해도 브라우저가 무시한다.
- 내부에 --을 넣으면 주석이 제대로 인식되지 않을 수 있다.
- '<!--'이 시작 태그이고 '-->'이 종료 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Tutorial 2</title>
</head>
<body>
<h3> Text Formatting </h3>
<p>
<b> Bold text </b><br>
<strong> Strong text </strong><br>
<i> Italic text </i><br>
<em> Emphasized text </em><br>
<mark> Marked text </mark><br>
<small> Smaller text </small><br>
<del> Deleted text </del><br>
<ins> Inserted text </ins><br>
text <sub> Subscript text </sub><br>
text <sup> Superscript text </sup><br>
</p>
<h3> Block Quote 긴 인용문 </h3>
<p>As Albert Einstein once said:</p>
<blockquote cite="https://www.example.com/einstein-quotes">
"Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>
<h3> Inline Quote 짧은 인용문 </h3>
<p>Steve Jobs once said: <q>Stay hungry, stay foolish.</q></p>
<h3> Citation 출처 </h3>
<p>The book <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.</p>
<h3> Abbereviation 약어 </h3>
<p><abbr title="World Health Organization">WHO</abbr> is an international health agency.</p>
<h3> Address 주소 </h3>
<address>
Written by Dried min.<br>
Visit us at: https://driedmin.tistory.com <br>
Korea
</address>
<h3> Bidirectional Override 텍스트 방향 </h3>
<p>Normal text: Hello</p>
<p>Reversed text: <bdo dir="rtl">Hello</bdo></p>
<!-- 주석처리 -->
</body>
</html>'국비 > HTML' 카테고리의 다른 글
| [HTML Tutorial] 4. HTML Styles CSS (0) | 2025.03.04 |
|---|---|
| [HTML Tutorial] 2. HTML 기초 - 기본적인 구성과 태그, 속성들 (0) | 2025.03.04 |
| [HTML Tutorial] 1. HTML 소개 (0) | 2025.02.27 |