시작하기전에...
HTML도 처음 만들어진 이래로 꽤 많은 시간이 흘렀고 수많은 태그들이 만들어지고 사라지기를 반복해왔습니다. HTML 코드를 사용하기 전에 이러한 흐름을 알고 있어야 지금 사용하는 코드가 얼마나 많은 곳에서, 얼마나 오랫동안 유효한지를 알수있고 또 그 목적에 따라 알맞게 사용할 수 있습니다. 통계 자료를 통해 알아보겠습니다.
목표
현재 HTML에서 쓰이는 tag들 중 가장 많이 사용되는 tag가 무엇인지 그리고 어떻게 사용하는지 알아보겠습니다!
본문
첫 번째 이미지는 "한 페이지에 얼마나 많은 태그가 사용되는가"이고,
두 번째 이미지는 "가장 많이 사용되는 태그"를 순서대로 나열한 것 입니다.
한 페이지에 사용되는 태그의 수
한 페이지당 약 32개의 각기 다른 태그들이 사용된다고 합니다.
HTML tag Top 10
1. <html>
HTML 문서의 루트(최상단 요소)를 나타내며 "루트 요소"라고도 부릅니다.(웹 페이지 작성의 시작과 끝!)
<html>
<!-- 웹 페이지를 구성하는 모든 정보 -->
</html>2. <head>
HTML 문서의 보이지 않는 정보를 담당합니다. 보이지 않는 정보는 클라이언트(사용자) 기준이고 달리 얘기하면 기계가 식별할 수 있는 문서 정보인 "메타 데이터"를 담고 있습니다.
<head>
<!-- 사용자에게 보이지 않는 정보의 영역(메타데이터의 영역) -->
</head>3. <body>
<head>와 달리 HTML 문서의 내용(사용자에게 보여지는 내용)을 나타냅니다.
<body>
<!-- 사용자에게 전달하고자 하는 정보 -->
</body>4. <title>
브라우저의 제목 표시줄이나 페이지 탭에 보이는 "문서의 제목"을 정의합니다. <head> 내부에 작성해야 합니다.
<title>문서의 제목을 넣으시오</title>5. <meta>
<link>, <script>, <style>, <title> 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">6. <div>
분할을 의미하는 'division'의 약어인 <div>는 "순수 컨테이너"로서 역할을 수행합니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
<div>담고싶은 내용</div>7. <a>
닻을 의미하는 'anchor'의 약어로 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
<a href="www.google.com" target="_blank">내용</a>8. <script>
데이터와 실행 가능한 코드를 문서에 포함할 때 사용합니다. 보통 JavaScript 코드와 함께 쓰입니다.
<script src="javascript.js"></script>9. <link>
현재 문서와 외부 리소스의 관계를 명시합니다. CSS 문서를 연결할 때 제일 많이 사용하지만, 사이트 아이콘 연결 등 여러가지로 쓰일 수 있습니다.
<!-- 외부 스타일 시트와 연결할 때 -->
<link href="main.css" rel="stylesheet">
<!-- 아이콘을 연결할 때 -->
<link rel="icon" href="favicon.ico">10. <img>
문서에 이미지를 넣습니다. <img> 요소 하나당 1개의 이미지를 삽입할 수 있습니다.
<img src="favicon144.png" alt="MDN logo">마치며...
위 10개 이외에도 많은 코드들이 다양하게 쓰이고 있습니다.
더 많은 정보를 원한다면 MDN과 같은 사이트를 통해 자세한 사용 방법과 속성들도 알 수 있습니다.
위 내용을 정리하며 몇가지 든 궁금증은
1. 왜 JavaScript는 <script>로, CSS는 <link>로 연결할까?
2. 요소(element)와 태그(tag)의 의미적 차이는 무엇일까?
정도가 있었습니다.
위 내용에서 수정할 사항이 있다면 댓글로 달아주시면 확인하도록 하겠습니다. 읽어주셔서 감사합니다.
