Front/HTML

[HTML5] 글자 태그 1 : <h#>, <p>, <br/>, <a>

헹창 2020. 8. 18.

[HTML5] 글자 태그 1 : <h#>, <p>, <br/>, <a>

- Heading Tag

제목, 주제를 표현할 때 쓰는 태그로 <h1>-<h6> 요소는 6단계의 구획 제목을 나타낸다.

<!DOCTYPE html>

<!-- Parent (부모요소) -->
<html lang="ko">

	<!-- Child (자식요소) -->
	<head>
		<!-- Indent (들여쓰기) : 일반적으로 4포인트 -->
		<title>웹표준</title>
	</head>
	<body>
		<!-- Heading Tag : 제목, 주제를 표현할 때 쓰는 태그 -->
		<h1>티스토리</h1>
		<h2>부제목</h2>
		<h3>h3태그</h3>
		<h4>h4태그</h4>
		<h5>h5태그</h5>
		<h6>h6태그</h6>
	</body>
</html>

<h1></h1>는 회사의 로고 혹은 가장 중요도가 높은 제목에 사용하며 보통 문서에서 딱 한번 사용한다.

<h2></h2>는 영역마다의 이름을 넣어주는 역할로도 사용한다.

특별히 글자의 크기나 굵기에 대한 스타일을 주지 않았지만 다음과 같이 각 태그의 표출되는 스타일이 다른 것을 볼 수 있다.

단순히 글자 크기만 크게 보일 뿐 아니라, 검색엔진이 문서를 파악하기 위해 쓰이므로 상황에 맞게 <h#>를 잘 써주는 것이 중요하다.

- Paragraph Tag

문서의 단락이나 본문내용을 표기할 때 혹은 본문 안의 단락을 여러 개 나눌 때도 사용된다.

- lorem (dummy Text) : 단락안에 내용이 들어가지만 어떤 내용이 들어갈 지 모를 때 영역을 잡는 용도로 사용한다.

<!DOCTYPE html>

<!-- Parent (부모요소) -->
<html lang="ko">

	<!-- Child (자식요소) -->
	<head>
		<!-- Indent (들여쓰기) : 일반적으로 4포인트 -->
		<title>웹표준</title>
	</head>
	<body>
		<!-- Paragraph Tag : 제목, 주제를 표현할 때 쓰는 태그 -->
		<p>동해물과 백두산이 마르고 닳도록</p>
		<p>우리나라만세</p>
        
		<!-- lorem (dummy text) -->
		<p>
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi dolore sapiente, deserunt consequatur ratione facilis reiciendis beatae dolorum eveniet, cupiditate voluptatum quo tempore. Sit quis atque vel similique temporibus doloremque?
		</p>
	</body>
</html>

- br Tag

기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않아,

줄 바꿈을 하려면 줄 바꿈 명령어인 <br/>를 사용한다.

br 태그는 닫힘 태그가 없는 태그로 <br> 혹은 <br/>로 사용하지만, <br/>을 권장한다.

<!DOCTYPE html>

<html lang="ko">

	<head>
		<title>웹표준</title>
	</head>
	<body>
		첫번째줄
		두번째줄<br/>세번째줄
	</body>
</html>

- a Tag

<a></a> 태그는 하이퍼링크를 걸어주는 태그이다.

속성

href : 클릭 시 이동할 링크 주소

target : 링크를 여는 방법

- _selft : 현재 페이지에서 이동 (기본값)

- _blank : 새 탭으로 페이지 이동

- _parent : 부모 페이지로 이동 (iframe 등이 사용된 환경에서 쓰인다.)

- _top : 최상위 페이지로 이동 (iframe 등이 사용된 환경에서 쓰인다.)

<!DOCTYPE html>

<html lang="ko">

	<head>
		<title>웹표준</title>
	</head>
	<body>
		<a href="http://www.naver.com">Naver 이동</a>
		<br/>
		<a href="http://haenny.tistory.com" target="_blank">Haenny 이동</a>
	</body>
</html>

▶ 다른 글자 태그 알아보기

[HTML5] 글자태그 2 : , , , , _{, ^{, ,}}

[HTML5] 글자태그 2 : , , , , , , , - strong Tag 글자 강조 strong 태그 사용 - b Tag 굵은글씨 체 b 태그 사용 - i Tag 기울어진 글씨 체 i 태그 사용 - small Tag 글씨를 작게 small 태그 사용 - ..

haenny.tistory.com

728x90

저작자표시 비영리 변경금지

'Front > HTML' 카테고리의 다른 글

[HTML5] input 요소의 타입 완전 정복 (0)	2020.08.19
[HTML5] 글자태그 2 : <strong>, <b>, <i>, <small>, <sub>, <sup>, <ins>, <del> (0)	2020.08.18
[HTML5] 목록을 정의하는 태그 : <ul>, <ol>, <dl> (0)	2020.08.18
[HTML5] <head> 태그 : <title>, <meta>, <link>, <style> (0)	2020.08.18
[HTML5] HTML 기초 (0)	2020.08.18

[HTML5] 글자 태그 1 : <h#>, <p>, <br/>, <a>