HTML에서 서식 태그란?
HTML에서 서식 태그는 텍스트에 서식을 적용하는 데 사용되는 태그입니다. 이러한 서식 태그는 텍스트 스타일, 색상, 크기 등을 변경할 수 있습니다. 일반적으로, 서식 태그는 <b>, <i>, <u,> <s>, <sup>, <sub>, <mark>, <small> 등이 있습니다.
서식 태그는 디자인 요소를 강조하거나 페이지의 레이아웃을 향상시키는 데 사용될 수 있습니다. 그러나, 과도한 사용은 읽기 어려운 페이지를 만들 수 있습니다. 따라서, 서식 태그는 적절하게 사용하여 웹 페이지의 가독성과 사용자 경험을 향상시키는 데 활용하는 것이 좋습니다.
서식에 사용되는 태그의 종류
- <b> 태그: 텍스트를 굵게 표시합니다.
- <i> 태그: 텍스트를 기울임꼴로 표시합니다.
- <u> 태그: 텍스트에 밑줄을 표시합니다.
- <s> 태그: 텍스트에 취소선을 표시합니다.
- <sup> 태그: 텍스트를 위 첨자로 표시합니다.
- <sub> 태그: 텍스트를 아래 첨자로 표시합니다.
- <mark> 태그: 텍스트를 강조하고 하이라이트 표시합니다.
- <small> 태그: 텍스트를 작게 표시합니다.
서식 태그의 사용 예시
<p>이번 달은 <b>30%</b> 할인이 있습니다.</p>
<p>제 이름은 <i>홍길동</i>입니다.</p>
<p>이것은 <u>밑줄</u>입니다.</p>
<p>이것은 <s>취소선</s>입니다.</p>
<p>H<sub>2</sub>O는 물의 분자식입니다.</p>
<p>이 문서의 중요한 부분은 <mark>강조</mark>합니다.</p>
<p>작은 글씨로 쓰는 <small>이용약관</small>입니다.</p>보통 위와 같이 문단을 표시하는 <p> 태그에서 특정 텍스트를 서식 태그로 감싸서 사용합니다.
예시로 작성한 코드를 실제 웹 페이지에서 확인하면 위 이미지처럼 보입니다.
문맥적 의미를 나타내는 태그
HTML에서 strong 및 em 태그는 텍스트에 중요성을 나타내는 데 사용됩니다. 이러한 태그는 서식 태그와 비슷하지만, 문맥적 의미를 나타내기 위해 사용됩니다.
<strong> 태그
텍스트를 강조하여 중요한 내용임을 나타냅니다. 일반적으로, strong 태그는 굵은 글씨로 표시됩니다.
<em> 태그
텍스트를 강조하여 강조되어야 하는 문맥을 나타냅니다. 일반적으로, em 태그는 기울임꼴로 표시됩니다.
각 태그는 서로 다른 중요성을 나타내지만, 두 태그 모두 텍스트를 강조하기 위해 사용됩니다.
이러한 태그는 검색 엔진 최적화에도 도움이 됩니다. 검색 엔진은 <strong> 태그가 더 중요한 텍스트임을 인식하며, <em> 태그는 강조되어야 하는 텍스트임을 인식하기 때문에 되도록이면 이 두 테그를 활용하는 것을 습관화하는 것이 좋습니다.
다음은 <strong> 및 <em> 태그를 사용한 예시 코드입니다.
<p>이번 달은 <strong>30%</strong> 할인이 있습니다.</p>
<p>제 이름은 <em>홍길동</em>입니다.</p>
위 코드에서, <strong> 태그는 할인 비율이 중요한 정보임을 나타내고, <em> 태그는 이름이 강조되어야 하는 문맥을 나타냅니다. 이러한 태그를 사용하여 텍스트를 강조하면, 사용자에게 중요한 정보를 강조하는 데 도움이 되고, 검색 엔진에서도 적절한 가중치를 부여할 수 있습니다.
