1. 텍스트 작성
1) hn 태그
<hn> 제목 </hn>다음과 같이 사용한다.
여기서 h는 heading, n은 중요도 숫자이며 1부터 6까지 있다.
1이 가장 중요한 텍스트로 가장 크고 6이 가장 작다.
검색엔진에서는 hn태그를 키워드로 인식하므로
검색엔진 최적화를 위해 hn태그를 적절히 사용하는 것이 중요하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page!</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>다음과 같은 코드를 실행 시키면 글자크기를 알 수 있는데,
이정도 크기 차이를 보인다.
* HTML에서 hn태그는 h1부터 순서대로 인식한다. 따라서 hn태그를 사용할 때는 h1부터 순서대로 사용하고 연속적으로 숫자를 사용해야 한다. 예를 들어서 h1,h2,h4 를 사용하면 h3을 인식하지 못했기 때문에 h1,h2만 출력하고 h4는 출력하지 않는 경우가 생긴다.
2) p태그
<p> 본문 내용 </p>다음과 같이 사용하여 본문을 적고 싶을 때 사용할 수 있다.
HTML에서 제목이나 핵심 텍스트를 제외하면 모두 본문이기 때문에
p태그를 사용할 일이 많다.
주의해야 할 점은
<p>
Hello
World
</p>이렇게 작성해도 p태그에서는 줄바꿈을 적용시키지 않고
이와 같이 출력시킨다는 것이다.
HTML은 태그 기반 언어기때문에 모든 명령은 태그를 통해서 해야한다.
3) br 태그
그래서 존재하는 것이 br태그이다.
br태그는 본문에서 줄바꿈을 할 때 사용된다.
<p>
Hello <br>
World
</p>이처럼 사용할 수 있는데, 이렇게 사용하면
줄바꿈이 가능하다.
4) blockquote 태그
인용한 내용의 출처를 넣어두고 싶을때 사용 가능하다.
실제로 웹페이지에 출처가 노출되진 않지만
출처가 확실할 경우에는 출처경로를 명시해야만 한다.
<blockquote cite="https://ko.wikipedia.org/wiki/HTML">
<p>
하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML,
문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.
또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라
링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. </p>
</blockquote>다음과 같이 사용 가능하다.
5) q 태그
마찬가지로 인용에 쓰이는 태그이다.
<q cite="출처 url"> 인용문 </q>다음과 같이 사용되며, 짧은 인용문을 인용할 때 사용할 수 있다.
6) ins, del 태그
ins 는 insert, del은 delete로 각각 추가된 텍스트, 삭제된 텍스트를 의미한다.
그래서 ins태그로는 밑줄, del 태그로는 취소선을 만들 수 있다.
<p>
<del>delete text</del><br>
<ins>insert text</ins>
</p>다음과 같이 사용하며, 사용시
이렇게 나타난다.
7) sub, sup 태그
각각 아래첨자, 위첨자 태그이다.
<p>
H<sub>2</sub>O <br>
4<sup>2</sup>
</p>다음과 같이 사용하며, 사용시
이와 같이 나타난다.
'Development > HTML' 카테고리의 다른 글
| HTML의 태그(4) - 링크 및 이미지 삽입 (0) | 2024.03.21 |
|---|---|
| HTML의 태그(3) - 목록 (0) | 2024.03.17 |
| HTML의 태그(2) - 그룹 (0) | 2024.03.17 |
| HTML 이란? (0) | 2024.03.12 |
