1. 제목 (Headings) 태그
Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다.
제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다.
<!DOCTYPE html>
<html>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>2. 글자 형태 (Text Formatting) 태그
2.1 b (non-semantic)
bold체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
2.2 strong (Semantic)
b tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다.
웹표준을 준수하고자 한다면 strong를 사용하는 것이 바람직하다.
2.3 i (non-semantic)
Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
2.4 em (Semantic)
i tag와 동일하게 Italic체로 표현된다. 의미론적(Semantic) 중요성의 의미를 갖는다.
2.5 small (non-semantic)
한 사이즈 작은 글꼴를 지정한다.
2.6 mark (non-semantic)
highlighted text를 지정한다.
2.7 del (Semantic)
deleted (removed) text 를 지정한다. ex) blue
2.8 ins (Semantic)
inserted (added) text (밑줄)를 지정한다.
2.9 sub / sup (Semantic)
수학식, 화학식 등을 표현할 때 사용가능
sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정한다.
3. 본문 태그
3.1 p (non-semantic)
단락 (Paragraphs)을 지정한다.
<p>내용</p>3.2 br (non-semantic)
br tag는 (강제)개행 (line break)을 지정한다. br tag는 빈 요소(empty element)로 종료태그가 없다.
※ HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시된다.
3.3 pre (non-semantic)
형식화된(preformatted) text를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.
<pre>
console.log(myArray[0]); // undefined
</pre>
결과 : console.log(myArray[0]); // undefined3.4 hr (non-semantic)
수평줄을 삽입한다.
<p>HTML</p>
<hr>
<p>CSS</p>3.5 q (Semantic)
짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
결과: WWF's goal is to: "Build a future where people live in harmony with nature."3.6 blockquote (Semantic)
긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다. css를 이용하여 다양한 style 을 적용할 수 있다.
참고
'HTML CSS' 카테고리의 다른 글
| CSS 이론 채워 넣기 - 1. 셀렉터(Selector) (0) | 2023.09.14 |
|---|---|
| HTML 다시 배우기 - 4. hyperlink / list / 멀티미디어 태그 / form (0) | 2023.09.09 |
| HTML 다시 배우기 - 2. HTML 기본 태그 (0) | 2023.09.07 |
| HTML 다시 배우기 - 1. 시맨틱 웹(Semantic Web) (0) | 2023.09.07 |
| [CSS] 이미지 테두리에 그림자 (0) | 2022.08.28 |
