[HTML] 03. 텍스트 관련 태그

Front-End/HTML

[HTML] 03. 텍스트 관련 태그

Bigone17 2021. 11. 10. 10:44

🟡 1. 제목 (headings) 태그

- heading 태그는 h1 ~ h6까지 있으며, 제목을 나타낼 때 사용합니다. h1이 제일 크기가 크고 중요도가 높으며 숫자가 작아질수록 크기도 작아집니다. 검색엔진에서는 heading 태그를 통해서 제목이라고 인식하는 경우가 많으므로, 제목 이외에 사용은 하지 않는 것이 좋습니다.

<!DOCTYPE html>
<html>
	<head>
    </head>
    <body>
    	<h1>h1 태그</h1>
        <h2>h2 태그</h2>
        <h3>h3 태그</h3>
        <h4>h4 태그</h4>
        <h5>h5 태그</h5>
        <h6>h6 태그</h6>
    </body>
</html>

🟡 2. 폰트 (text Formatting) 태그

🟡 2.1 b 태그

- b태그는 bold의 약자로 글자를 bold 처리합니다.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p> 보통 글씨체</p>
		<b> 볼드 글씨체</b>
	</body>
</html>

🟡 2.2 strong 태그

- b태그처럼 글자를 bold 처리해준다. b태그와 다른 점은 b태그는 단순 텍스트를 진하게 표시하는 것이지만, strong태그는 실제로 페이지 내의 중요한 부분이라는 것을 브라우저에게 알려줍니다. 웹 표준을 따른다면 b태그보다는 strong태그를 사용하는 것을 추천합니다. *스크린 리더(시각 장애인 분들을 위해 웹사이트를 음성으로 읽어줌)에서는 strong태그로 되어 있는 문장을 강조하여 읽어줍니다.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p> 보통 글씨체</p>
		<strong> 스트롱 글씨체</b>
	</body>
</html>

🟡 2.3 i 태그

- i태그는 Italic체의 약자로 글자를 italic체로 지정해줍니다.
*italic체를 왜 쓰는지 궁금해서 찾아봤더니, 수학-과학 등의 단위 또는 용어 등을 쓸 때랑 소설 등에서 생각하는 부분을 작성할 때 쓴다고 합니다.👍

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <p> 보통 글씨체</p>
      <i> Italic 글씨체</i>
    </body>
</html>

🟡 2.4 em 태그

- em태그는 i태그처럼 글자를 italic체로 지정해줍니다. i태그와 차이점은 실질적인 강조를 의미합니다. strong태그와 같이 스크린리더에 영향을 줍니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <p> 보통 글씨체</p>
      <em> em 글씨체</em>
    </body>
</html>

🟡 2.5 mark 태그

- mark태그는 글자에 하이라이트를 넣어 줍니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <mark>하이라이트!</mark>
    </body>
</html>

🟡 2.6 small 태그

- small 태그는 글씨를 작게 표시해줍니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <p>보통글씨  <small>작은글씨</small> 보통글씨</p>
    </body>
</html>

🟡 2.7 ins 태그

- ins 태그는 글자에 아래 밑줄을 그어줍니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <p>보통글씨  <ins>아래밑줄글씨</ins> 보통글씨</p>
    </body>
</html>

🟡 2.8 del 태그

- del 태그는 글자에 삭제 밑줄을 그어줍니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <p>보통글씨  <del>삭제글씨</del> 보통글씨</p>
    </body>
</html>

🟡 2.9 sup / sub 태그

- sup은 superscripted의 약자로 위로 쓰이는 글씨이고, sub 태그는 subscripted의 약자로 자막처럼 아래에 쓰이는 글씨입니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <p>이것은 <sup>위로</sup> 쓰여진 글씨입니다.</p>
      <p>이것은 <sub>아래로</sub> 쓰여진 글씨입니다.</p>
    </body>
</html>

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > HTML' 카테고리의 다른 글

[HTML] 06. LIST & TABLE (1)	2021.11.17
[HTML] 05. Hyperlink (0)	2021.11.15
[HTML] 04. 텍스트 관련 태그2 (0)	2021.11.12
[HTML] 02. 기본 Tag (2)	2021.11.08
[HTML] 01. HTML란? 그리고 기분 문법 (0)	2021.10.31

현재글[HTML] 03. 텍스트 관련 태그

250x250

rn 화면 회전, NextJS, tag, 자바스크립트, 코테, Next.js, JavaScript, HTML FORM, json-server, jsonServer, 자바스크립트 객체, programmers, rn 세모 모드 고정, Sentry, 코딩테스트, JS, 프로그래머스, rn 화면 회전 금지, HTML, html button,

Today :
Yesterday :

운좋개