HTML 에는 여러가지 Text 태그가 있다.
Text를 원하는 느낌으로 출력하기 위해서 쓰는것이지만
단순히 Text를 꾸미는 용도로만 쓰는것이라면 css로도 충분히 가능하다.
Text 태그를 사용해주어야하는 이유는 하나는 웹 접근성 향상을 위함이다.
웹 사이트를 제작할때는 장애인,노인 누구나 동등하게 웹 사이트의 서비스를 제공 받을수있도록 보장하는
웹 접근성을 지켜야하기때문이다.
우리가 제목을 표시하고
강조해야하는 부분을 표시하는 등
텍스트들을 태그로써 표시를 해둔다면 스크린 리더를 통해 시각장애인들도
웹사이트에 적힌 텍스트들을 파악할수있도록 할수있다.
그리하면 웹 접근성 향상에 기여되는것이다.
스크린 리더?
스크린의 정보를 음성으로 출력해 주는 화면 낭독 프로그램이다.
😊 그럼 간단하게 텍스트 태그들의 종류를 알아보자
✏️ 제목태그 <hn>
<hn> 태그는 웹 문서에서 제목을 표시할때 쓰이며 ,
h1 ~ h6 까지 크기 순으로 되어있다.
예시
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
제목 태그를 사용할때 웹 접근성을 고려하기위해서는 2가지를 지켜야한다.
1. h1 태그는 한 페이지에 1개만 사용한다.
- 여러개 사용할 경우 스크린리더에서 낭독할때 혼란이 생길수있으므로 1개 사용하는것이 좋다.
2. 제목은 h1 부터 h6 까지 순서대로 사용한다.
- 웹 페이지는 여러가지로 구성할수 있고, 각영역마다 제목을 붙일수있다.
따라서 순서대로 사용하는것이 좋다.
✏️ <p> / <br>
p 태그
p태그는 본문을 여러 단락으로 나눌때 사용한다.
<p>안녕하세요.</p>
<p>오늘은 html을 배우는 날 입니다.
너무 즐겁네요.
</p>
p태그 특징
1. 여러개의 공백을 넣어도 하나의 공백만 표시된다.
2. 코드상으로 줄바꿈을 해도 웹 브라우저에서는 줄바꿈 처리되지않는다.
br 태그
br 태그는 줄바꿈을 처리해주는 태그이다.
<p>안녕하세요.</p>
<br />
<br />
<br />
<p>
오늘은 html을 배우는 날 입니다 <br />
너무 즐겁네요.
</p>
br은 p태그와 달리 여러개를 넣으면 그만큼 여러번 줄바꿈 처리가 되는것을 알수있다.
남은 태그들은 한꺼번에 알아보겠다.
dfn태그는 <dfn>용어 정의</dfn><br />
EM Tag는 <em>부분 강조 용도</em><br />
VAR Tag는 <var>변수 표시 용도</var><br />
Strong Tag는 <strong>강함 강조</strong><br />
Strike Tag는 <strike>삭제 표시 용도</strike>
<h3>2. 물리적 tag</h3>
<pre>
이 문자는 <b>굵은 글씨 b tag</b>
이 문자는 <b>굵은 글씨 b tag</b>
이 문자는 <i>이탤릭(기울임)_i tag</i>
이 문자는 <u>밑줄효과_u tag</u>
이 문자는 <center>중간정렬효과 tag</center>
이 문자는 <tt>타자기글씨체_tt tag</tt>
이 문자는 <sup>위첨자_sup tag</sup>
이 문자는 <small>조금작게_small tag</ㄴ>
이 문자는 <big>조금크게_big tag</big>
이 문자는 <sub>아래첨자_sub tag</sub>
이 문자는 <s>취소선_s</s>
</pre>
💡그렇다면 접근성을 고려한 텍스트문서를 한번 작성해보도록해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>제목입니다.</title>
<meta name="helloworld" content="안녕하세요 여기는 meta세계 입니다." />
</head>
<body>
<div style="background-color: beige;">
<h1>거북이에 대한 모든것</h1>
<p>거북은 거북목에 속하는 <em>파충류</em>를 일컫는다.</p>
<p>
한국에는 <dfn>바다거북</dfn> <dfn>장수거북</dfn> <dfn>남생이</dfn> <dfn>자라</dfn>등 4종이
알려져있다.
</p>
<img src="../../images/거북목.jpg" alt="거북이의 사진" />
</div>
<hr />
<div>
<div style="background-color: rgb(228, 160, 160);">
<h2>생태</h2>
<h3>생식</h3>
<p>
<blockquote>
거북류는 <b>난생</b>으로, 육생종이나 수생종 모두 수중에서 교미하며
육지에서 산란한다. <br />
한배에 <strike>100~200</strike> 10 ~ 20개를 산란하며, 1~3 개월에 부화한다.
</blockquote>
</p>
</div>
<div style="background-color: rgb(156, 246, 156);">
<h3>생활</h3>
<p>
<blockquote>
육상생활을 하는 거북은 대부분 <b>초식성</b>이지만 다른것은 <b>잡식성</b>이다. <br>
<dfn>식물</dfn>, 작은 <dfn>물고기</dfn>등 다양한것을 먹고 사는데, 특히 애완용 거북이인 <var>붉은귀거북</var>은 생태계를 <font color="red">교란</font>시킨다.
</blockquote>
</p>
</div>
<div style="background-color: rgb(157, 157, 227);">
<h3>성격</h3>
<p>
<blockquote>
거북의 등은 <Strong>단단한 껍질</Strong>로 싸여있고 아주 <small>느리게</small> 움직이며 이빨이 없고 비공격적이다. <br>
반면 <big>늑대거북</big> 과 <big>악어거북</big>은 일반거북과 달리 <font color="red">공격적</font>이다.
</blockquote>
</p>
<center><img src="../../images/늑대거북.jpg" alt="늑대거북이의 사진입니다."></center>
</div>
</div>
</body>
</html>
- h1태그를 제일 상단에 한번만 두어 거북이에 대한 글임을 제목으로 작성하였고
나머지 부제목을 따라 h2 h3 순으로 작성하여 제목에대한 혼동이 없도록 하였다.
- 이미지가 안보이거나 없을 경우에도 이미지의 대한 정보를 파악할수있도록 alt속성값에 이미지에 대한 정보를
입력하였다.
- 설명에서 중요하게 강조될 단어들은 em 혹은 strong 태그로 감싸 이부분이 중요한 포인트임을 표시했다.
- 문단마다 컬러값을 다르게 주어 나누어진 문단을 더욱 확실하게 표시해두었으며
blockquote 태그를 이용해 제목과 설명을 나누어 표시하게 하여 구분하여 읽기 편하도록 하였다.
거북이 자료에 대한 출처 : https://ko.wikipedia.org/wiki/%EA%B1%B0%EB%B6%81