4.HTML_텍스트 관련 태그

1. heading

제목을 나타낼 때 사용하는 태그

h1에서 h6까지 있음

h1이 가장 중요한 제목을 의미

검색엔진은 제목 태그를 중요한 의미로 받아들인다

MDN Usage Notes

-글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 CSS의 font-size 속성을 사용하세요.

-제목 단계를 건너뛰는 것을 피하세요. 언제나 <h1>로 시작해서, <h2>, 순차적으로 기입하세요.

-페이지 당 하나의 <h1>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <h1>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <h1>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.
   
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>

링크텍스트

2.글자 형태 태그, 인라인 텍스트 시맨틱

2.1 b

bold체를 지정한다, semantic 중요성의 의미는 없다.

브라우저는 여전히 굵은 글씨체로 강조하지만 b를 사용해서 텍스트를 꾸미지말자

CSS font-weight를 사용해서 굵은 글씨체를 적용하거나, strong을 사용하자

2.2 strong - 높은 중요도 요소

strong은 매우 심각하거나 긴급한 것을 포함하여 매우 중요한 콘텐츠를 위한 것이다.

b tag와 동일하게 bold체를 지정한다. 하지만 의미론적으로 중요하다.

렌더링은 b tag와 동일하지만 웹표준을 준수하고자 한다면 strong를 사용하는 것이 바람직하다.

링크텍스트

2.3 i

텍스트에서 어떠한 이유로 주위와 구분해야하는 부분을 나타낸다.

기술 용어, 외국어 구절, 등장인물의 생각들을 예시로 들 수 있음.

Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.

단순히 글자를 기울이기 위한 용도로는 사용하지 말 것, CSS font-style(en-US)속성을 사용할 것

em 요소는 강세를 나타냅니다.
strong 요소는 보다 강한 강조를 나타냅니다.
mark 요소는 관련성을 나타냅니다.
cite 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.
dfn 요소는 정의 대상인 용어를 나타냅니다.

2.4 em

요소는 텍스트의 강세를 나타냅니다. 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

의미론적 중요성을 갖는다.

링크텍스트

2.5 small

small text를 지정한다

덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냄.

기본사용법

<p>This is the first sentence.
 <small>This whole sentence is in small letters.</small>
</p>

This is the first sentence. This whole sentence is in small letters.

CSS 예제 
<p>This is the first sentence.
  <span style="font-size:0.8em">This whole sentence is in small
  letters.</span>
</p>

This is the first sentence. This whole sentence is in small letters.

### 2.6 mark highlighted text를 지정한다. 
<!DOCTYPE html>
<html>
  <body>
    <h2>HTML <mark>Marked</mark> Formatting</h2>
  </body>
</html>

HTML Marked Formatting

링크텍스트

2.7 del

deleted (removed) text를 지정한다.

<!DOCTYPE html>
<html>
  <body>
    <p>The del element represents deleted (removed) text.</p>
    <p>My favorite color is <del>blue</del> red.</p>
  </body>
</html>

The del element represents deleted (removed) text.

My favorite color is blue red.

### 2.8 ins inserted (added) text를 지정한다 
<!DOCTYPE html>
<html>
  <body>
    <p>The ins element represent inserted (added) text.</p>
    <p>My favorite <ins>color</ins> is red.</p>
  </body>
</html>

The ins element represent inserted (added) text.

My favorite color is red.

2.9 sub /sup

sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정한다.

sub요소는 타이포그래피적인 이유에 맞춰서만 사용해야 한다.

타이포그래피적인 이유란? 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 내려야 할 때는 사용 x

예를 들어 비즈니스나 상품의 워드마크 글씨 기준선을 내려야 한다면 sub** 대신 CSS(대개 vertical-align)를 사용해야 합니다. vertical-align: sub를 사용할 수도 있고, 기준선을 25% 내려야 한다면 vertical-align: -25%로도 쓸 수 있습니다.

sub의 적절한 사용처

각주 표기. 아래의 각주 표기 예제를 참고하세요.
수학 변수의 숫자 표기. MathML을 사용하는 방향을 고려하세요.
화학식에서 원소의 수를 나타낼 때. (개발자의 친구, C8H10N4O2, 카페인)

sup의 적절한 사용처의 몇 가지는 다음과 같습니다.

"x3" 등 거듭제곱 연산의 지수 표기. 더 복잡한 표기를 해야 할 경우 MathML을 고려하세요. 아래의 지수 표기 예제를 참고하세요.
"4th" 등 서수 표기. 아래의 서수 표기 예제를 참고하세요.

3.본문 태그

3.1 p

단락을 지정한다.

브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리한다.

첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.

<!DOCTYPE html>
<html>
  <body>
    <h1>This is a heading.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </body>
</html>

This is a heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



접근성 고려사항 콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.

빈 p 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.

여분의 공간이 필요하다면 margin 등 CSS 속성을 통해 적용하세요.

p {
margin-bottom: 2em; // 문단 다음 여백을 늘림
}

3.2 br

br tag는 (강제)개행 (line break)을 지정한다. br tag는 빈 요소(empty element)로 종료태그가 없다.

<!DOCTYPE html>
<html>
  <body>
    <p>This is<br>a para<br>graph with line breaks</p>
  </body>
</html>

This is
a para
graph with line breaks

문단 구분을 br로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, br**에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.

p 요소와 함께 CSS margin 속성 등을 조합해 간격을 조절하세요.

3.3 pre

형식화된(preformatted) text를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  _______________________
< 나는 이 분야의 전문가다. >
  -----------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다.
  </figcaption>
</figure>
  _______________________
< 나는 이 분야의 전문가다. >
  -----------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다. ### 3.4 hr 수평줄을 삽입한다.

이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다.

align 줄의 정렬을 지정합니다. 기본값은 left입니다.
color 색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.
noshade Sets the rule to have no shading.
size 줄의 높이를 픽셀 단위로 지정합니다.
width 줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.

3.5 q

짧은 인용문을 지정.

줄바꿈이 없는 짧은 경우에 적합.

큰따옴표로 인용문을 감싼다

cite
인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.

          > 어떠한 효과가 나타나는지 정확히 모르겠음
<p>Mozilla 재단의 웹사이트에 따르면,
  <q
  cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0
  은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q></p>

Mozilla 재단의 웹사이트에 따르면, Firefox 1.0 은 2004년 처음 공개되어 큰 성공을 거두었습니다.

3.6 blockquote

긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다. css를 이용하여 다양한 style을 적용할 수 있다.

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World
[TIL]search cluster using docker container not docker compose
89일차 - L2 : Triple X

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage