-html 태그 어떤걸 주로 쓸까?
advancedwebranking닷컴에서 매긴 자주 사용되는 태그 순위입니다. 아래로 갈 수록 덜 쓰이는 태그지만 순위에 들었다는 것만으로도 전세계 사람들이 가장 많이 쓰는 html 태그 종류 라고 할 수 있습니다.
<html> html 문서의 최상위 부모이자 태그입니다. html 태그 중에 가장 많이 쓰일 수 밖에 없겠죠?
<head> html 문서의 제목, 링크, 메타데이터 등을 포함하고 있습니다. 문서의 기본 정도라고 할 수 있습니다.
<body> 문서의 콘텐츠를 담은 영역입니다. 콘텐츠를 담는 태그이니 위의 태그들과 마찬가지로 필수적인 태그입니다.
<title> 문서의 제목을 나타내며, 브라우저 창에 나타납니다.
<meta> 해당 문서에 대한 메타데이터로 head태그 안에 속해 있습니다. 문자셋이 대표적입니다.
<div> 요소를 담을 박스의 용도로 사용하는 무의미한 태그입니다. 구획을 나눠 레이아웃을 잡을 때 혹은 구조적으로 요소들을 한데 모아 놓을 필요가 있을 때 자주 쓰입니다. html 태그 중에서 필수적인 요소를 빼고는 1위로 가장 많이 쓰인다고 봐야겠네요.
<a> html 문서의 주인공이라고 할 수 있는 태그입니다. 하이퍼링크라고 불리며, 웹의 본질과도 같은 역할을 합니다.
<script> 자바스크립트와 같은 스크립트를 쓰는 공간입니다. <script src="">로 쓰면 스크립트 파일을 링크할 수 있습니다.
<link> 주로 웹폰트나 라이브러리등의 cdn, 스타일 시트를 링크하는데에 쓰이는 태그입니다.
<img> 이미지를 삽입할 수 있습니다.
<span> div와 같이 의미를 가지고 있지 않습니다. 인라인 요소라는 점이 차이점 입니다.
<p> 문단을 기입할 수 있습니다.
<li> 리스트를 작성할 수 있습니다. ol태그나 ul태그의 자식입니다.
<ul> 순서가 없는 리스트로서, 앞에 숫자가 붙지 않습니다.
<style> 스타일 시트 파일을 따로 만들지 않고 head 태그 내에서 사용해 스타일을 줄 수 있습니다.
<br> 줄바꿈을 위한 태그입니다. html 태그 종류 중에서 가장 심플하게 느껴집니다.
<h1>~<h6> 본문에 적용되는 제목들입니다. 숫자가 커질수록 크기나 중요도가 낮아집니다.
<input> 데이터를 입력받을 수 있는 필드입니다.
<form> input 태그에서 입력받은 데이터를 서버로 전달하는 역할을 합니다.
<nav> 문서 내 또는 다른 링크로 이루어진 네비게이션 요소들을 모아놓은 부모입니다.
<footer> 주로 문서의 하단에 위치하며, 저작권이나 법적 고지, 하단 메뉴 등을 기입한 영역입니다.
<header> 주로 문서의 상단에 위치하며, 메뉴나 사이트의 로고 등이 있습니다.
<iframe> 인라인 프레임(이미지, 동영상, 지도...)또는 html문서 등을 삽입할 수 있습니다.
<button> 버튼입니다.
<strong> 중요도가 있는 요소를 표시하기 위해 사용합니다.
<i> 본문과 차별화되는 분위기나 음성 등을 나타냅니다.
-작업하면서 기억에 남는 태그들
주로 시멘틱 요소( 의미가 담긴 태그 )가 있는 html 태그 종류가 생소하게 보였던 기억이 납니다.
<main> 메인 콘텐츠를 담는 영역입니다. 문서의 주제라고 볼 수 있습니다.
<article> 신문의 기사 섹션 처럼, 독립적으로 구성할 수 있는 단위의 요소입니다.
<aside> 메인과 다른 콘텐츠를 담는 영역입니다.
<section> 분할된 영역으로, 본문을 크게 나눌 때 사용합니다.
<figure> 문서의 주요 흐름과는 상관없이, 독립적인 이미지 등에 사용됩니다.
<figcaption> figure에 대한 설명을 작성하는 태그입니다.
<fieldset> 연관된 폼 요소를 묶는 그룹입니다.
<legend> 필드셋을 감싸는 선으로, 제목이나 설명을 쓸 수 있습니다.
<details> 세부적인 정보로, 대체로 유저가 열고 닫을 수 있습니다.
<summary> 디테일한 요소의 제목이라고 할 수 있습니다.
<svg> SVG 그래픽을 담는 그릇입니다. html 태그 중에서 관심이 가는 태그입니다.
<video> 동영상을 삽입할 수 있는 태그로, 음소거나 자동재생 등 의 옵션을 태그내에 작성할 수 있습니다.
-블로그나 게임, 인터렉티브 웹 등에 쓰일 것 같은 태그들
게임이나 콘텐츠 만들 때 사용할 수 있을 것 같은 html 태그 종류 입니다.
<canvas> 스크립트로 그래픽 콘텐츠를 그릴 수 있는 캔버스입니다. html 태그 안에서 게임이 그려지
<audio> 음악이나 효과음 등 소리를 담는 태그입니다.
블로그를 운영할때 요긴하게 쓸 것 같은 html 태그 종류 입니다.
<pre> 인용문에 주로 쓰이는 태그이며, 띄어쓰기와 줄바꿈이 그대로 나옵니다.
<q> pre보다 짧은 인용문에 쓰입니다.
<time> 날짜와 시간을 나타냅니다.
html 태그 순위와 시멘틱 태그, 인터렉티브 요소에 쓰일 수 있는 태그들에 대해 정리해보았습니다.
'웹, 게임 제작' 카테고리의 다른 글
| css 선택자 활용 (0) | 2021.08.20 |
|---|---|
| css 선택자 기본 (0) | 2021.08.20 |
| css inline, block, inline-block element (0) | 2021.08.19 |
| vscode 단축키 및 환경설정 vscode live server, FTP, ftp simple, Emmet, Beautify (0) | 2021.08.19 |
| Phaser 기본세팅과 플랫포머 튜토리얼 (0) | 2021.02.26 |
댓글