[HTML] 태그(tag)의 역할과 사용방법

제목(Heading) - <h>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

• 제목을 나타내는 태그이다.
• <h1>~<h6> 숫자는 크기와 우선순위를 나타낸다.
• block 속성을 가지므로 단독적인 강조 표현이 가능하다.
• 컨텐츠들의 영역을 구분하는 기준점으로 사용할 수 있다.
• 검색엔진에 의해 수집되기 때문에 제목은 꼭 <h> 태그를 사용해 주는 것이 좋다.

 

 

서식(Text Formatting)

<b>- 굵은 텍스트
<strong>- 중요한 텍스트
<i>- 기울임꼴 텍스트
<em>- 강조된 텍스트
<mark>- 표시된 텍스트
<small>- 더 작은 텍스트
<del>- 삭제된 텍스트
<ins>- 삽입된 텍스트
<sub>- 아래 첨자 텍스트
<sup>- 위 첨자 텍스트

• Inline 속성을 갖는 문자 포맷 관련 태그들은 고유의 기능을 부여하기 위해 자주 사용되기도 하지만 태그의 위치를 이용하여 스타일링을 추가적으로 하기 위해서도 많이 사용된다.
• 시멘틱 마크업의 관점에서 단순 굵기를 표현하는 <b> 태그보다 중요하다는 의미도 포함하는 <strong> 태그 사용을 지향한다.

 

 

단락(Paragraphs) - <p>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

• 단락은 나누어주는 태그이다.
• blcok 속성을 가진다.

 

 

주석(Comments)

<!-- 주석내용 -->

• 코드에 대한 설명이나 디버깅을 위해 작성한 구문을 의미한다.
• 브라우저가 읽기만 하고 실행은 하지 않는다.
• 문서 소스를 보는 툴을 이용하면 노출되기 때문에 민감한 정보를 적는 건 지양한다.
• 단축키는 Ctrl + /

 

 

링크(Links) - <a>

<a href="url">link text</a>

• 링크를 통해 사용자는 페이지에서 페이지로 이동할 수 있다. (문서 내부로도 가능)
• href 속성은 연결할 페이지나 사이트의 URL 주소를 명시한다.
• 링크가 반드시 텍스트일 필요는 없다.
• 2가지만 기억하자 - 어디에 링크를 걸 것인가, 그 페이지나 사이트의 URL 주소
• 기본적으로 링크가 걸린 텍스트는 밑줄, 파란색 색상으로 변경된다.

 

 

이미지(Image) - <img>

<img src="url" alt="대체문자열">

• img 태그는 종료 태그가 없는 빈 태그(empty tag)이며, inline 속성을 갖는다
• src 속성에 url 주소를 작성하고, alt 속성에는 이미지가 로딩될 수 없는 상황에 대체될 문자열을 작성한다.
• width, height 속성으로 이미지의 크기를 지정할 수 있다.
• 주로 사용되는 이미지 형식은 jpeg, png가 대표적이다.

 

 

리스트(List)

<!--순서가 표기되지 않는 리스트-->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<!--순서가 표기되는 리스트-->
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<!--설명, 정의 목적의 리스트-->
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

• list 태그는 block 속성을 갖는다.
• 리스트 앞의 마커(marker)는 다른 모양으로 변경할 수 있다.
• ul 태그는 nav-bar를 작성할 때 많이 사용된다.

 

 

테이블(Table) - <table>

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Harry</td>
    <td>hermione</td>
    <td>ron</td>
  </tr>
  <tr>
    <td>14</td>
    <td>16</td>
    <td>10</td>
  </tr>
</table>

• tr(table row) 태그는 테이블에서 열을 구분해준다.
• td(table data) 태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.
• 셀을 헤더로 사용하려면 th(table head) 태그를 사용한다. strong, 중앙정렬이 기본 적용되어있다.
• colspan 속성은 테이블의 열 합치기, rowspan 속성은 테이블의 행 합치기
• table 태그는 레이아웃 용도로 사용하지 않는다.

 

 

 

 

 

※ 참고자료

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started

http://www.tcpschool.com/html/intro

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