<Introduction>
HTML에 대해 알기 위해 기본적이면서 중요한 tag를 알아보고자 합니다.
<전 세계 사이트의 HTML 주요 element type(tag)>
새로운 것을 배울 때, 기본이나 많이 사용하는 걸 우선적으로 알아보고자 합니다.
HTML로 구성되어 있는 전 세계 웹사이트를 대상으로 사용된 tag의 수를 통계로 확인하였습니다.
즉, 해당 tag만 알더라도 HTML로 구성된 웹사이트를 구성하는데 문제가 없다는 의미가 아닐까요??
해당 자료를 보면 평균 32개 정도를 사용하고, 32개 정도의 tag만 잘 공부하더라도 기본적인 HTML 언어를 읽거나 분석하는 것이 가능하고, 나아가 직접 코딩할 때도 전혀 문제가 없는 것 같습니다!
HTML에 대한 자세한 통계는 아래 링크 남겨두겠습니다!! (재미있어요!)
<HTML 주요 element type(tag)>
주된 32개의 tag에 대한 사용 빈도는 아래와 같습니다.
그래서, 32개의 tag에 대해서 정리하고자 합니다.
<html> : HTML 문서의 루트 요소(root element)로, 웹페이지의 시작과 끝을 정의합니다.
<head> : head는 해당 html 문서의 전반적인 내용을 담고 있는 태그입니다. title, link, meta 등의 tag 포함
<body> : 해당 문서의 콘텐츠 영역, 즉 브라우저에 실제로 표시되는 내용들을 정의합니다.
<title> : <head> tag 하위 tag로 문서의 제목을 정의합니다. 웹브라우저의 탭에 표시됩니다.
<meta> : 해당 문서에 대한 정보를 정의합니다. ex) <meta charset="utf-8"> = 문자 인코딩 방식은 "utf-8"로 지정
<div> : HTML 문서에서 특정 영역이나 구획을 block 단위로 정의합니다. 목적에 따라 묶는 의미입니다.
<span> : HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용합니다.
span vs div 차이
-
더보기두 tag 모두 어떤 목적에 따라 내용을 묶기 위한 tag입니다. 다만, div의 경우 block 단위로 묶이기에 줄 바꿈이 되지만 span의 경우는 인라인 요소를 묶기 때문에 줄 바꿈이 적용되지 않습니다.
<a> : 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의합니다. ex) <a href="링크"> 내용 </a>
<script>: 실행 가능한 자바스크립트 코드 삽입을 위한 태그입니다.
<link> : 외부 파일을 연결할 때 사용합니다. ex) <link href='외부 CSS 파일 경로" rel="stylesheet" type="static/css">
<img> : 이미지 삽입을 위한 태그입니다. ex) <img src="이미지 경로">, 이때 이미지 경로는 주소도 가능!
<p> : paragraph의 줄임말로 단락을 만드는 태그입니다.
<li> : HTML 리스트(list)에 포함되는 아이템(item)을 정의합니다.
<ul> : unordered list의 줄임말로, 순서가 없는 HTML 리스트(list)를 정의합니다.
<ol> : ordered list의 줄임말로, 순서가 있는 HTML 리스트(list)를 정의합니다.
<style> : 해당 HTML 문서의 스타일 정보를 정의합니다. <head> tag 하위에 정의됩니다.
<br> : 줄 바꿈 기능을 의미합니다. 닫는 태그가 없는 게 특징입니다.
<h1~6>: HTML 문서에서 제목(headings)을 정의합니다.
<input> : 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의합니다.
<form> : 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의합니다.
<nav> : 같은 사이트 안의 페이지나 다른 사이트의 페이지로 연결하는 링크를 정의하며, 위치 영향을 받지 않습니다.
<footer> : 웹 사이트의 제작자 정보나 연락처 정보를 정의합니다.
<header> : 문서나 특정 섹션의 헤더(header)를 정의하며, 한 번만 작성되는 <head>와 달리 필요한 만큼 사용 가능합니다.
<button> : form 요소 중 하나로, 페이지에 버튼을 정의합니다. submit, reset, button의 속성을 지닙니다.
<strong> : 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조합니다. 굵게 표시됨!
<li> : 글꼴의 모양을 기울임으로 표기합니다.
'Programming > HTML' 카테고리의 다른 글
| [HTML] CSS 작동 원리 (0) | 2022.01.18 |
|---|---|
| [HTML] CSS 적용 방식 (0) | 2022.01.17 |
