[HTML/CSS] HTML Tag와 용도와 쓰임
프론트 엔드 공부를 시작했다면 HTML, CSS, Javascript는 필수적으로 배워야 한다. 또한 이들을 자유자재로 사용할 줄 알아야 한다.
https://www.advancedwebranking.com/seo/html-study/
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
위의 사이트는 웹페이지에서 많이 사용되는 태그들의 평균을 낸 사이트다.
태그 이외에도 다양한 정보가 있어 HTML을 사용하는데 참고하면 도움이 될 것 같다.
<body>
HTML의 <body>태그는 HTML 문서의 내용을 담는 것으로
한 문서에 하나의 <body> 태그만 존재할 수 있다.
Contents section
<header>
소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 예로 제목, 로고, 검색 form, 작성자 이름 등을 포함한다.
<main>
문서 body의 주요 콘텐츠를 나타낸다. 콘텐츠 단계는 <h1>이 가장 높고 <h6>가 가장 낮다.
<h1> <h2> <h3> <h4> <h5> <h6>
<nav>
문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여주는 곳이다. 자주 쓰이는 예시로는 메뉴, 목차, 색인이다.
<footer>
가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다. 일반적으로 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
<address>
사람, 단체, 조직 등에 대한 연락처 정보 표시
<article>
페이지 내에서 독립적으로 구분하여 배포하거나 재사용할 수 있는 부분을 나타낸다. 사용 예시로 게시판과 블로그의 글, 뉴스 기사 등이 있다.
<aside>
문서의 주요 내용과 간접적으로만 연관된 부분으로 사이드바로 표현한다.
<section>
문서의 독립적인 구획을 나타내고, 보통 제목을 포함하지만 항상 그런 것은 아니다.
Text content
<body> </body>사이의 블록이나 콘텐츠를 정리할 수 있다.
해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요하다.
(SEO, Search Engine Optimization에 대해서는 추후 업로드 할 예정이다.)
<div>
콘텐츠를 분할하는 요소로 순수 컨테이너로서 CSS로 꾸미기 전까지는 콘텐츠나 레이아웃에 어떤 영향을 주지 않는다. 의미를 가진 다른 요소 <article>, <nav> 등의 요소를 사용하기 적절하지 않을때 사용해야 한다.
가장 범용적으로 많이 사용하게 되는 태그이다.
<hr>
주제 변경, 주제 분리 등등을 표현하여 가로줄을 그린다.
<ol>
정렬 목록을 나타내는 것으로 보통 숫자 목록으로 표현한다.
<ul>
정렬되지 않은 목록을 나타내는 것으로 불릿 목록으로 많이 표현한다.
<li>
목록의 각각의 항목을 나타내는 것으로 <ol>이나 <ul>, <menu>안에 위치해야 한다.
<figure>
독립적인 콘텐츠를 표현하는 것으로 <img>태그로 이미지 콘텐츠를 보여주고, <figcaption>으로 해당 콘텐츠에 대한 설명을 넣을 수 있다. 보통 한 <figure>에 한 개의 콘텐츠를 넣는다.
<figcaption>
부모 태그인 <figure>가 포함하는 다른 콘텐츠에 대한 설명이나 범례를 표현한다.
<p>
하나의 문단을 나타내는 것으로, 이미지나 입력 폼 등 관련있는 콘텐츠 어떤 것이든 될 수 있다. 블록 레벨 요소이다.
<pre>
미리 서식을 지정한 텍스트를 나타내고, HTML에 작성한 내용 그대로 표현한다.
<blockquote>
안쪽의 텍스트가 긴 인용문임을 나타낸다.
<dl>
정의 목록으로 정의인 <dt>와 설명인 <dd>를 감싼다. 용어사전 구현이나 메타데이터를 표시할 때 사용한다.
<dt>
정의 목록에서 용어에 해당하는 것이다.
<dd>
정의 목록인 <dl>에서 용어인 <dt>에 대한 설명, 정의, 값을 표현한다.
<dl>
<dt>Denim (semigloss finish)</dt>
<dd>Ceiling</dd>
<dt>Denim (eggshell finish)</dt>
<dt>Evening Sky (eggshell finish)</dt>
<dd>Layered on the walls</dd>
</dl>
주로 위와 같이 <dl> <dt> <dd>를 사용한다.
인라인 텍스트 시멘틱
HTML 인라인 텍스트 시멘틱을 사용하면 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있다.
<a>
href 특성을 통해서 다른 페이지나 같은 페이지의 특정한 위치, 파일, 이메일 주소 등등 URL로 연결할 수 있는 하이퍼 링크를 만든다. <a>안에 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
<abbr>
준말또는 머리글자를 나타내는 것으로 속성으로 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있다. 사용 예시는 다음과 같다. <abbr title="Cascading Style Sheets">CSS</abbr>
<b>
독자의 주의를 끌기 위한 것으로 bold체를 적용하여 글씨를 강조할 수 있다. 요약 키워드, 리뷰의 제품명 등 특별한 중요성을 가지고 있지는 않지만 굵게 표현할 부분에 쓴다. <strong>, <em>, <mark>의 요소들을 혼동하지 않아야 한다. <strong>은 중요한 글, <em>은 약간의 강조가 필요한 글, <mark>는 관련성이 있는 글을 나타낼 때 쓴다. <b>는 아무런 의미를 갖지 않으므로 위와 같은 태그를 사용하기 적합하지 않을때 사용한다.
<br>
텍스트 안에 줄바꿈을 만들어준다.
<cite>
저작물의 출처를 표기할 때 사용한다. 제목을 반드시 포함해야 한다. 기울임꼴로 표현된다.
<code>
짧은 코드 조각을 나타낼 수 있다. 여러 줄의 코드를 나타내고 싶다면 <code>를 <pre>로 감싸면 된다. 보통 <code>는 한 줄만 나타낸다.
<data>
사용 예시를 보면 해당 상품의 이름을 표시하면서, 상품 번호도 연결한다.
<p>새로운 상품들</p>
<ul>
<li><data value="398">미니 케찹</data></li>
<li><data value="399">점보 케찹</data></li>
<li><data value="400">메가 점보 케찹</data></li>
</ul>
<dfn>
현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다.
<em>
해당 텍스트의 강조를 나타낸다. 기울임체로 표현된다. 주위 텍스트에 비해 강조할 부분에 쓰며, 보통 한 문장에서 단어 하나 혹은 몇 개로 제한된다. <i> 태그와 비교하자면 둘 다 기울임체로 표현되는 것은 같지만 <em>은 콘텐츠를 강조하지만 <i>는 외국어, 등장인물의 생각 등에 쓰이고 강조의 의미는 없다.
<i>
텍스트에서 어떤 이유로 주위와 구분해야 하는 데에 쓰인다. 기술 용어, 외국어 구절, 등장인물의 생각 등에 사용되고, 보통 기울임체로 표현된다.
<kbd>
키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다.
<mark>
현재 화면에서 텍스트에 중요한 부분으로 하이라이트로 표현한다. (형광펜으로 밑줄 긋는)
<q>
둘러싼 텍스트가 짧은 인라인 인용문이라는 것을 나타낸다. 보통 줄바꿈이 없는 짧은 경우에 적합하다. 긴 인용문은 <blockquote>를 사용하는 것이 적합하다.
<rp>
<ruby>를 사용한 루비 주석을 지원하지 않을 경우 보여줄 괄호를 제공할 때 사용한다.
<rt>
루비 텍스트 요소로 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정한다.
<ruby>
루비 주석을 나타내는 것으로 동아시아 문자의 발음을 표기할때 사용한다.
<s>
삭선으로 글자에 취소선을 나타내어 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내라. 상황에 따라 <del>이나 <ins>요소를 대신 사용하라.
<samp>
컴퓨터 프로그램 출력의 예시를 나타낸다.
<small>
덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낸다. 실제로 텍스트가 작게 표현된다.
<span>
구문 콘텐츠를 위한 통용 인라인 컨테이너로 본질적으로 아무것도 나타내지 않는다. 스타일을 적용하기 위해, lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 한다. <div>와 매우 유사하지만 <div>는 블록 레벨 요소이고, <span>은 인라인 요소이다.
<strong>
중대하거나 긴급한 콘텐츠를 표현하는 거승로 보통 굵은 굴씨로 표현된다. 경고 표시나 중요한 문장을 표현하는데 사용된다.
<sub>
산소의 원소기호 같은 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정한다. CO2나 H2O같은
<sup>
활자 배치를 위 첨자로 해야 하는 x^2 제곱 같은 것을 표현할때 사용한다.
<time>
시간의 특정 지점 또는 구간을 나타낸다. 시간 또는 날짜 값을 표현한다.
<u>
텍스트가 주석의 의미가 포함된 것으로 텍스트에 밑줄이 그어진 형태로 표현된다. 단순히 강조하거나 밑줄을 위해 사용하면 안된다.
<var>
수학의 수식이나 프로그래밍에서 변수 x, y, z 와 같은 이름을 표현하는데 사용한다. 기울임체로 보통 표현된다.
이미지와 멀티미디어
HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원한다.
<audio>
문서에 음성 콘텐츠, 오디오 콘텐츠를 포함할 때 사용한다. src 특성 또는 <source> 태그를 사용해서 한 개 이상의 오디오 소스를 지정할 수 있고, 다수를 지정할 경우 가장 적절한 소스를 브라우저가 선택한다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio 여기서 더욱 디테일한 사용법을 볼 수 있다.
<track>
미디어 요소인 <audio>, <video>의 자식으로서, 자막 등 시간별 트랙을 지정할 때 사용한다. 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 한다.
<video>
미디어 플레이어를 문서에 삽입하여 영상 재생을 할 수 있게 한다.
<img>
이미지 요소를 넣는데 사용한다.
<area>
이미지의 핫스팟 영역, 클릭 가능한 영역을 정의하고 하이퍼 링크를 추가할 수 있다. <map> 태그 안에서만 사용할 수 있다.
<map>
<area> 태그와 함께 이미지 맵을 정의할 때 사용한다. 클릭 가능한 영역을 정의할 때 사용한다.
<map name="infographic">
<area shape="poly" coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
<area shape="poly" coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />
스크립트
HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원한다.
<script>
데이터와 실행 가능한 코드를 문서에 포함할때 사용하며 JavaScript 코드와 함께 사용한다. WebGL의 GLSL 쉐이더 프로그래밍 언어, JSON 등 다른 언어와도 사용이 가능하다.
외부 스크립트를 가져오는 방법은 다음과 같다.
<script src="javascript.js"></script>https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
상세한 정보는 다음 글에서 참고할 수 있다.
<canvas> 캔버스 스크립팅 API 또는 WebGL API와 함께 사용하여 그래픽과 애니메이션을 그릴 수 있다.
<noscript> 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML을 정의
한다.
수정사항 표시
텍스트의 특정 부분이 수정되었다는 것을 표시할 수 있다.
<del>
문서에서 제거된 텍스트의 범위를 나타낸다. 문서나 소스 코드의 변경 추적에 사용할 수 있다.
<ins>
문서에 추가된 텍스트의 범위를 나타낸다. 소스 코드의 변경 추적에 사용할 수 있다.
표 컨텐츠
표 형식의 데이터를 생성하고 처리할 때 사용한다.
<caption> 표의 설명 또는 제목을 나타낸다.
<col> 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용한다.
<colgroup> 표의 열을 묶는 그룹을 정의한다.
<table> 행과 열로 이루어진 표를 나타낸다.
<tbody> 표의 여러 행(tr)을 묶어서 표 본문을 구성한다.
<td> Table cell, 데이터를 포함하는 표의 셀을 정의한다.
<tfoot> 표의 요약 등을 설명하는데 쓰인다.
<th> 테이블 셀 행의 그룹을 정의하는데 쓰인다.
양식
HTML은 여러가지 입력 가능한 요소를 제공한다. 이러한 태그들을 통해 사용자의 입력을 받아 사용할 수 있다.
<button>
클릭 가능한 버튼을 나타낸다. 버튼은 양식 내부는 물론, 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있다.
<datalist>
다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 여러개 제시해준다.
대화형 태그
HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 태그를 지원한다
<details> "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성한다.
<dialog> 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타낸다. 모달창을 만드는데 사용할 수 있을 것 같다.
<menu> 사용자가 수행하거나 하는 명령 묶음을 말한다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함한다.
<summary> <details>에 대한 요약, 캡션 또는 범례를 지정한다.
웹 컴포넌트
웹 컴포넌트는 완전히 새로운 형태의 요소를 생성한 후 일반적인 HTML처럼 사용할 수 있는 기술입니다. 또한 표준 HTML tag의 커스텀 버전을 만들 수도 있다.
<slot> 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더이다.
<template> 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공한다.
이처럼 수많은 Tag들이 존재한다. 어떤것이 있는지 다 알고 사용할 수 있다면 좋지만 그것보다는 어렴풋이 어떤 역할을 하는 Tag가 있었지하고 떠올리고 그때그때 바로 찾아 사용할 수 있다면 충분하다고 생각한다.