많이 쓰이는 HTML 태그 간단히 살펴보기

웹 언어 배우기/HTML
2018. 10. 23. 07:00

웹사이트를 만들 때 뼈대 역할을 하는 HTML은 많은 태그가 있고 응용할 수 있습니다. 이 말은 자신이 생각한 기능을 대부분 구현할 수 있다는 얘기입니다.

그 중 전 세계 구글 검색 결과에서 수집한 800만 개의 웹 페이지에서 어떤 태그가 많이 쓰이고 있는지 간단히 살펴보고자 합니다. 가장 많이 사용한다는 것은 그만큼 기능이 좋고 가능하다면 써야 한다는 뜻을 담고 있습니다.

많이 쓰이는 html 태그들 ⓒ 사진: https://www.advancedwebranking.com/html/

아니다 다를까 뼈대 역할을 하는 기본 문법인 <html>, <head>, <body> 태그가 대부분의 웹 페이지에서 쓰고 있습니다.

네이버 HTML로 알아보는 기본 구조, 틀, 뼈대

<head> 영역에서 많이 사용하는 태그들

<head> 태그 안에서 사용할 수 있는 <meta> 태그와 <title> 태그, <link> 태그가 많은 비중을 차지하고 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>다한의 웹 블로그</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>다한의 웹 블로그</h1>
  <table>
    <tr>
      <td>제목</td>
      <td>이름</td>
    </tr>
    <tr>
      <td>테스트</td>
      <td>테스트</td>
    </tr>
  </table>
</body>
</html>

html 기본 코드

http-equiv="항목명" : 웹 브라우저가 서버에 명령을 내리는 속성입니다. 예를 들어 explorer에서 정상적으로 보이고 싶으면 위 코드처럼 <meta http-equiv="X-UA-Compatible" content="IE=edge">을 입력하면 됩니다.

content="정보값" : meta 정보의 내용을 입력할 수 있습니다.

name="정보 이름" : 화면의 비율을 지정하는 viewport, 키워드를 지정하는 keword 등 정보 이름을 입력할 수 있습니다.

<title> 태그는 홈페이지의 제목을 나타낙 합니다. 본문에는 보이지 않지만, 브라우저의 탭에서 확인할 수 있습니다.

<link> 태그는 웹페이지에 아이콘을 배치하고 싶은데 만들수도 있지만 이미 있는 아이콘을 가지고 배치하고 싶을 때, HTML 파일과 분리된 CSS 파일과 연결하고 싶을 때 등 외부에서 웹 페이지로 연결하고 싶을 때 사용할 수 있습니다.