-텍스트는 일반적인 설명일 수 있고, 글의 제목이나 부제목일 수도 있다. 이번에는 텍스트를 작성할 때 어떤 태그를 사용하는지 배워 보도록 하자.
1. <hn> </hn> 태그
hn태그는 h1부터 h6 태그까지 총 6개가 있다. 여기서 h는 heading을 의미하며, n에 들어가는 숫자는
중요도를 나타낸다. 즉, 같은 h태그더라도 h1태그가 가장 중요하며 h6 태그는 상대적으로 덜 중요하다.
실행결과를 보며 한번 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>첫번째 Hello world!</h1>
<h2>두번째 Hello world!</h2>
<h3>세번째 Hello world!</h3>
<h4>네번째 Hello world!</h4>
<h5>다섯번째 Hello world!</h5>
<h6>여섯번째 Hello world!</h6>
</body>
</html>
실행결과를 보면 중요도가 가장 높은 h1 태그는 굵고 가장 크다.
밑으로 내려갈수록 작아지고 가늘어지는 것을 확인할 수 있다.
또한, hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식한다.
따라서 검색엔진 최적화(SEO Search Engine optimization를 위해
본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택하여 작성하도록 한다.
Tip. 검색 엔진은 h1태그부터 단계적으로 검색한다. 만약 순서대로 사용하지 않고
h1, h2, h4, h5 태그를 사용한다면 단계적으로 검색하다가 h3태그가 없기 때문에 h4, h5 태그를 검색하지 않는다. 그래서 hn 태그는 단계적으로 사용해야 한다.
2. <p> 태그
- p태그는 본문의 문단(paragraph)을 작성할 때 사용한다.
- p태그는 블록 요소(block element)이다.
<p> 내용 </p>HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p태그를 자주 사용한다.
<p>하나의 문단을 작성할때는 P태그를 사용한다.</p>3. <br> 태그
- br태그는 문단에서 줄 바꿈 할 때 사용한다.
다음 예시에서 <p> 태그를 사용하여 결과를 한번 확인해보자.
<p>안녕하세요
초코의 IT세상이야기 입니다..</p>
분명 <p> 태그에서 줄 바꿈이 되어 출력이 되어야 하지만,
실제로 실행결과 값을 확인해보면 한 줄로 출력이 된 것을 볼 수 있다.
이러한 이유가 발생하는 이유가 뭘까?
HTML은 모든 명령이나 지시를 태그로 해야 하기 때문이다. 줄 바꿈 하라는 간단한 명령조차도 태그를 이용해야 하는 것이
HTML이다. br태그를 사용하여 한번 확인해보자.
<p>
안녕하세요<br />
초코의 IT세상이야기 입니다..
</p>
출력 확인 결과 <br> 태그를 사용하니 정상으로 출력되는 것을 확인할
수 있다. HTML은 모든 명령이나 지시를 태그로 해야 하는 것을
명심하도록 하자.
4. <span> 태그
<span> 태그는 HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용한다.
<p>여행 리스트</p>
<p>
A.오늘의 오후에 바다를 가고, <span> B. 저녁은 숙소를 갈거야</span> C. 내일
아침은..
</p>코드에서 확인해보면 만약 내가 A, B, C 중 A, C만 컬러를 넣고 싶다고 하면 공간을 분할해야 하는 작업이 필요할 것이다.
이럴 때 span태그를 사용하면 된다. 텍스트도 인라인 요소이기 때문에 내부 콘텐츠를 sapn 태그로 그룹 지을 수 있다.
공간을 분할하여 분할된 요소들에게 CSS로 스타일을 적용할 수 있다.
긴 글 읽어주셔서 감사합니다.
부족한 설명은 댓글로 달아주시면 추가하도록 하겠습니다.
감사합니다. :)
- 오늘 나는 어떠한 하루를 보냈는가?
'Front-end Developer > HTML' 카테고리의 다른 글
| 7. HTML 목록 만드는 태그 <ul>,<ol>,<li>,<dl> (0) | 2022.10.23 |
|---|---|
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
| 3. HTML의 기본 구조 (html, meta, head, body) (0) | 2022.10.22 |
| 2. HTML의 특징 블록(block) 요소 vs 인라인(inline) 요소 (0) | 2022.10.22 |
