1. <h1~h6>태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제목 태그 h1~h6</title>
</head>
<body>
<h1>h1 태그 : 문서의 메인 제목으로 한 문서에 한 번만 사용하는 것을 권장. 주로 로고에 사용</h1>
<h2>h2 ~ h6 태그 : 제목 태그로 한 문서 안에 여러 번 사용 가능</h2>
<h2>의미없이 제목 단계를 건너뛰지 않음</h2>
<h3>중첩 작성 가능</h3>
<h4>h4 태그</h4>
<h5>h5 태그</h5>
<h6>h6 태그</h6>
</body>
</html>
<h> 태그는 문서의 제목을 표시할 때 사용하는 태그로 'heading'의 의미를 가지고 있다.
h1은 가장 상위 계층의 제목을 표시할 때 사용하며 h1 -> h6로 갈수록 제목 크기가 작아진다.
<h>태그는 제목의 기능 외에도 검색 엔진에서 웹사이트의 내용을 파악할 때 <h>태그를 이용해 키워드를 수집하고 판단하기 때문에 HTML에 포함되는 제목은 <h>태그로 작성해야 제대로 검색될 확률을 높일 수 있다.
2. <p></p>태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>문단 태그 p</h1>
<h2>문단을 정의하는 요소</h2>
<h3>블록 요소이나 문단 태그는 또 다른 블록 요소를 포함하지 않는다. 주로 인라인 요소에만 넣음.</h3>
<p>문단은 하나 이상의 문장으로 구성되며 이야기의 독립적인 단위를 형성.
문단의 시작은 새로운 줄로 나타낸다.</p>
<!-- <p></p> 단순히 여백을 위해 의미없이 사용하지 않는다. -->
<p>텍스트를 일정 단위로 나누면 이해하기 더 쉬워진다.</p>
<p>책에는 장(chapter)이 있다. 장에는 주 제목이 있다.
그리고 각 제목 아래에는 여러 문단이 있다.</p>
<p>사용자의 가독성과 접근성을 고려하여 긴 글은 문단을 잘 나누어 작성해야 한다.</p>
</body>
</html>
3. <br>태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 줄바꿈 태그 br</title>
</head>
<body>
<h1>줄바꿈 태그 br</h1>
<h2>빈 요소, 혹은 열린 태그로 종료 태그 없음.</h2>
<p>인위적인 여백을 만들기 위해 사용하지 않으며 꼭 필요한 곳에만,<br>
이 위치에 반드시 줄바꿈이 필요한 경우에만 사용한다.<br>
반응형 웹에서는 br 태그를 이용해 줄바꿈을 하기 보다 span 태그를 이용해 줄바꿈을 하는 편.</p>
</body>
</html>
4. <em></em>태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>일반 강조 태그 em</title>
</head>
<body>
<h1>일반 강조 태그 em</h1>
<p><em>인라인 요소</em><br>
일반적인 강조의 의미로 사용</p>
<p>1. em은 주로 <em>기울여져서</em> 표현됩니다.</p>
<!-- 인라인 요소 안에 블록 요소를 사용할 수 없기 때문에 아래의 구조는 안됨. -->
<em><p>2. 디자인을 위해 em을 사용해서는 안됩니다.</p></em>
<!-- 보여지는 것에는 문제가 없지만 웹 접근성이나 유효성에서 문제가 된다. -->
<p>3. 비슷한 태그로 <i>i가 있습니다.</i> i는 단순 구분을 위해 사용합니다.</p>
</body>
</html>
5. <strong></strong> 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>강한 강조 태그 strong</title>
</head>
<body>
<h1>강한 강조 태그 strong</h1>
<h2>인라인 요소</h2>
<p><strong>주의:</strong> 소매치기가 이 지역에서 발생하고 있습니다.</p>
<p>이 인형은 작은 조각이 많이 있으므로 <strong><em>5세 미만의 아이들</em></strong>에게 적합하지 않습니다.
</p>
<!--
블록 요소 안에는 다른 블록요소나 인라인 요소가 포함될 수 있다.
<p><em></em></p> : 가능, <em><p></p></em> : 불가능
인라인 요소 안에는 인라인 요소는 포함될 수 있지만 블록 요소는 포함될 수 없다.
<strong><em></em></strong> : 가능, <em><strong></strong></em> : 가능
-->
</body>
</html>
'HTML5' 카테고리의 다른 글
| [HTML] HTML5 Layout 구조 (0) | 2022.09.22 |
|---|---|
| [HTML5] 리스트 태그 <ol>, <ul>, <dl> (0) | 2022.09.22 |
| [HTML5] 콘텐츠 분할 태그 <div>, <span> (0) | 2022.09.21 |
| [HTML5] <blockquote>인용 태그</blockquote>, <address>사용자 정보 태그</address> (0) | 2022.09.21 |
| [HTML5] 기본 작성 코드 (0) | 2022.09.20 |