코딩독학) HTML 태그의 종류와 역할

HTML 태그는 너무 많아서 일일이 다 열거하고 설명하긴 힘들다. 그 중에서도 자주 쓰이는 태그만 기록해놓고 공부할 예정이다.

 

텍스트 태그

<!-- --> : 주석 태그로 웹 브라우저에서 명령을 처리하도록 인식되지 않고 작성자 입장에서 어떤 메모를 기록해둘 때 사용한다. 웹 페이지를 표시할 때는 나타나지 않는다.

<p> : paragraph의 약자로 문단을 구분할 때 사용한다.

<h1>~<h6> : 헤드라인을 표시하는 태그로 제목을 강조하기 위해 진하고 크게 만들어준다. 1이 크고 6으로 갈 수록 글씨 크기가 작아진다. h태그는 영역태그이기도 해서 가로줄 전체를 사용한다.

<hr> : 구분선을 넣어주는 태그, 단일 태그

* HTML 문서에서 스페이스는 연달아 사용해도 1번만 인식되고, 엔터는 아예 인식되지 않으므로 보여지는 화면에서 스페이스와 엔터를 넣고 싶으면 다음과 같은 태그와 문자조합을 사용한다.

&nbsp; : space 역할하는 문자 조합

<br> : 엔터 역할을 하는 태그, 단일 태그

<strong> : 글자를 진하게 표시하는 태그

<mark> : 글자에 노란색 하이라이트를 하는 태그

 

예제 연습

 

리스트 태그

<li> : 리스트를 만들어주는 태그

<ol> : ordered list의 약자로 순서가 있는 리스트를 만들어주는 태그

<ul> : unordered list의 약자로 순서가 없는 리스트를 만들어주는 태그

 

예제 연습

 

이미지 태그와 링크 태그

<img> : 이미지를 삽입해주는 태그. src라는 속성을 넣어 불러올 이미지의 주소를 적어준다.

img 태그에는 alt 속성과 width 속성 등이 있는데 아래와 같이 적어준다.

<img alt="이미지가 제대로 나오지 않을 경우 표시할 문구", width="브라우저 상의 표시하고 싶은 이미지의 넓이">

 

<a> : 다른 문서로 이동시켜주는 링크 태그. href라는 속성을 넣어 이동시킬 다른 문서의 주소를 적어준다.

a 태그에는 target 속성이 있는데 아래와 같이 적어준다.

<a target="본 페이지에서 열거면 _self, 새 페이지에서 열거면 _blank">

 

예제 연습

 

표 태그

<table> : 표를 만드는 태그.

<thead> : 표의 헤드 부분. 

<tbody> : 표의 바디 부분.

<tfoot> : 표의 바닥 부분.

* 표의 헤드, 바디, 풋을 잡는 이유는 이렇게 하지 않아도 레이아웃 상의 영향은 없으나 CSS를 넣기 편리하게 만들기 위해서 구분한다.

<tr> : 표의 행을 만드는 태그.

<th> : 표의 열을 만들며 제목을 넣는 태그. 진하게 표시된다.

<td> : 표의 내용 부분.

 

예제 연습

 

 

 

출처

https://www.w3schools.com/tags/default.asp

HTML Reference