웹 페이지(html 시멘틱) 구획 요소 태그 (tag)

웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 1

2022. 2. 15. 15:57

웹 페이지 구획요소 태그 링크

아래 제목을 클릭하시면 해당 링크로 이동됩니다.

HTML의 각각의 태그에 구획을 맡아 의미가 정해진 것들이 어떠한 것이 있는지 첫 번째 정리하는 시간을 가져본다.

1. 웹 페이지 구획 요소 (<h1> ~ <h6>) 태그(tag)

이 태그들은 다 알건대 나 같은 경우는 그냥 해당 태그마다 글자크기가 다르고

그냥 느낌대로 해당 개발 문서에 이 크기이면 적당하겠군.. 이라며

주관적인 생각을 갖으며 주로 사용해왔는데,

이후 제대로 된 사용법을 터득했으니 고쳐야겠다.

우선 이 태그들 마다 특징이 있는데 <h1>~ 작은 숫자부터 중요도가 높고,

낮아질수록 중요도가 떨어진다고 생각하면 된다.

<h1> 이 가장 중요도가 높으며 <h6>가 반대로 중요도가 낮다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#%EB%AA%A8%EB%93%A0_%EC%A0%9C%EB%AA%A9_%EB%8B%A8%EA%B3%84

<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN

HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

developer.mozilla.org

위 링크 참고하면 더욱더 자세한 설명이 있다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		h1,
		h2,
		h3,
		h4 {
		    margin: .1rem 0;
		}

		h1 {
		    font-size: 2rem;
		}

		h2 {
		    font-size: 1.5rem;
		    padding-left: 20px;
		}

		h3 {
		    font-size: 1.2rem;
		    padding-left: 40px;
		}

		h4 {
		    font-size: 1rem;
		    font-style: italic;
		    padding-left: 60px;
		}
	</style>
</head>
<body>
	<h1>Beetles</h1>
    <h2>External morphology</h2>
    <h3>Head</h3>
    <h4>Mouthparts</h4>
	<h3>Thorax</h3>
    <h4>Prothorax</h4>
    <h4>Pterothorax</h4>
</body>
</html>

위 사이트에서 참고를 하자면 제목 단계를 건너뛰면 안되고,

언제나 <h1>로 시작해서 단계적으로 <h2>를 사용하고 <h3>을 사용하고.. 이런 식으로 사용하라고 한다...

또 <h1> 태그는 한 페이지당 한 번만 사용하라고 권장한다.

두번 쓰고 세 번 쓰고 해도 오류는 안 나지만 페이지당 하나씩 사용하는 게 모범사례라 한다.

스크린 리더 사용자와 SEO에 도 더 적합하다고 한다..

그럼 지켜야지... h1 태그는 한 페이지당 한 번 사용하는 걸로....

SEO란?
링크 ☜ 이글을 참조

2. 웹 페이지 구획 요소 (header, hgroup) 태그(tag)

header 요소는 구획 콘텐츠가 아니라서 구획을 생성하지 않는다.

그럼에도 불구하고 이 내용을 작성하는 이유는 필요한 사람이 있을 수도 있으니깐....

깔끔하게 코드를 구분 지어 개발하려는 사람이 있다면 사용하고,

난 그런 거 신경 안 쓴다 하면 사용 안 해도 된다.

이 header 태그는 해당 페이지의 소개 및 탐색에 도움을 주는 콘텐츠를 나타내기 위해 사용한다.

제목, 로고 검색, 폼 작성자 이름 등의 요소도 header 태그 안에 넣어서 사용한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/header

<header> - HTML: Hypertext Markup Language | MDN

HTML <header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.

developer.mozilla.org

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">

	</style>
</head>
<body>
	<header>
		<img src="https://tistory4.daumcdn.net/tistory/5242077/skin/images/seoul-2267397_960_720.jpg" alt="Banner">
		<hgroup>
			<h1>대한민국 서울</h1>
			<h2>서울의 야경</h2>
		</hgroup>
	</header>
</body>
</html>

header 태그 안에는 플로우 콘텐츠를 허용하는 모든 요소

https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%ED%94%8C%EB%A1%9C%EC%9A%B0_%EC%BD%98%ED%85%90%EC%B8%A0

콘텐츠 카테고리 - 웹 개발자 안내서 | MDN

모든 HTML 요소는 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속합니다.

developer.mozilla.org

요기 사이트에 들어가면 플로우 콘텐츠에 관련된 모든 태그가 나온다.

이 태그들이 header 태그 안에 다 들어올 수 있다.

단, 사용 못하는 태그도 있으니 주의해야 한다.

(ex address, , footer) 태그, 이 header 태그는 사용해도 되고,

안 해도 되는 거라 필수 사항은 아니라서 개발자 입맛대로 사용하면 될 듯싶다.

hgroup 태그는 문서 구획을 나타내기 위해 사용하는데,

그냥 <h1> ~ <h6> 태그 중 연달아 나오면 이 <h1> ~ <h6> 태그를 묶어주기 위해 사용한다 생각하면 된다.

어렵게 생각할 필요가 없다. 그냥 h 태그를 묶어주기 위해 사용한다.

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 3 (0)	2022.02.19
웹 페이지(html 시멘틱) 구획 요소 태그 (tag), 웹접근성, 랜드마크 ARIA - 2 (0)	2022.02.16
HTML 문서 구조 (0)	2022.02.14
자바스크립트 - 자동으로 유형이 변환되는 경우(자동 유형 변환) (0)	2022.02.12
함수 호이스팅(Hoisting) (0)	2022.02.10

열공의 기록