HTML 과 TAG
< Visual Studio Code 활용 >
1. HTML에서 'TAG'란? ¹
요소(element)는 웹 페이지를 구성한다.
요소는 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있다.
일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성된다.
태그(tag)는 요소를 만들 때 사용한다.
예를 들면, 문단 태그 <p>처럼, 요소 이름을 부등호 사이에 넣어서 태그를 구성할 수 있다. 닫는 태그는 이름 앞에 슬래시 문자를 </p>와 같이 포함한다.
빈 요소의 경우에는 닫는 태그가 필요하지 않고, 지정해서도 안된다.
태그에 특성을 지정하지 않으면, 기본값을 사용한다.
웹페이지에서 오른쪽 버튼을 클릭해서 페이지 소스 보기를 눌러보면 다양한 태그를 볼 수 있다.
2. 태그 종류 알아보기
메인루트
| 요소 | 설명 |
| <html> | HTML 문서의 루트(최상단 요소) "루트 요소"라고도 부른다. 모든 다른 요소는 <html> 요소의 후손이어야 한다. |
문서 메타데이터
메타데이터는 페이지에 대한 정보를 가진다.
(스타일, 스크립트, 각종 소프트웨어(검색엔진(en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등)
* 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당 정보를 가진 다른 파일로 링크할 수도 있다.
| 요소 | 설명 |
| <base> | 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정한다. 문서에는 하나의 <base> 요소만 존재할 수 있다. |
| <head> | HTML <head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다. |
| <link> | 현재 문서와 외부 리소스의 관계를 명시한다. <link>는 CSS를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰임 가능. |
| <meta> | base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다. |
| <style> | 문서나 문서 일부에 대한 스타일 정보를 포함 |
| <title> | 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의 |
구획루트
| 요소 | 설명 |
| <body> | HTML <body> 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <body> 요소만 존재할 수 있습니다. |
콘텐츠 구획
콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다.
구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등 페이지 콘텐츠의 큰 틀을 잡는다.
| 요소 | 설명 |
| <address> | 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다. |
| <article> | 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획. |
| <aside> | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다. |
| <footer> | 가장 가까운 구획콘텐츠나 구획루트의 푸터를 나타낸다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다. |
| <header> | 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다. |
| <h1> ~ <h6> | 6단계의 구획 제목. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮다. |
| <main> | 문서 body의 주요 콘텐츠. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다. |
| <nav> | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획. 자주 쓰이는 예제는 메뉴, 목차, 색인 |
| <section> | HTML 문서의 독립적인 구획. 더 적합한 의미를 가진 요소가 없을 때 사용. |
텍스트 콘텐츠
HTML 텍스트 콘텐츠를 사용하여 여는 <body>와 닫는 </body> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있다.
해당 콘텐츠의 목적이나 구조 판별에 사용하고, 접근성과 SEO에 중요합니다.
| 요소 | 설명 |
| <blockquote> | 안쪽의 텍스트가 긴 인용문임을 나타낸다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 cite 요소로 제공할 수 있습니다. |
| <dd> | 정의 목록 요소(dl)에서 앞선 용어(dt)에 대한 설명, 정의, 또는 값을 제공한다. |
| <div> | 플로우 콘텐츠를 위한 통용 컨테이너. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다. |
| <dl> | 설명 목록을 나타낸다. <dl>은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성한다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용. |
| <dt> | 설명 혹은 정의 리스트에서 용어를 나타냅니다. dl 요소 안에 위치해야 한다. |
| <figcaption> | 부모 figure 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다. |
| <figure> | 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있다. |
| <hr> | 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다. |
| <li> | 목록의 항목을 나타낸다. |
| <menu> | 사용자가 수행하거나 하는 명령 묶음. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함한다. |
| <ol> | 정렬된 목록을 나타낸다. 보통 숫자 목록으로 표현합니다. |
| <p> | 하나의 문단을 나타낸다. |
| <pre> | 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현한다. |
| <ul> | 정렬되지 않은 목록을 나타낸다. 보통 불릿으로 표현. |
인라인 텍스트 시멘틱
HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있다.
| 요소 | 내용 |
| <a> | href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 생성한다. |
| <abbr> | 준말 또는 머리글자를 나타낸다 |
| <b> | 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용한다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. |
| <bdi> (en-US) | |
| <bdo> | 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용한다. |
| <br> | 텍스트 안에 줄바꿈(캐리지 리턴)을 생성. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용하다. |
| <cite> | 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 한다. |
| <code> | 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시한다. |
| <data> | 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결한다. |
| <dfn> | 현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다. |
| <em> | 텍스트의 강세. <em> 요소를 중첩하면 더 큰 강세를 뜻하게 된다. |
| <i> | 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분. |
| <kbd> | 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다. |
| <mark> | 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분. |
| <q> | 둘러싼 텍스트가 짧은 인라인 인용문이라는 것을 나타낸다. |
| <rp> | ruby 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용한다. |
| <rt> | 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정한다. |
| <ruby> | 루비 주석을 나타낸다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용. |
| <s> | 글자에 취소선, 즉 글자를 가로지르는 선을 그린다. |
| <samp> | 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타낸다. |
| <small> | 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낸다. |
| <span> | 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다. |
| <strong> | 중대하거나 긴급한 콘텐츠를 나타낸다. 보통 브라우저는 굵은 글씨로 표시 |
| <sub> | 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정한다. |
| <sup> | 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정한다. |
| <time> | 시간의 특정 지점 또는 구간을 나타낸다. |
| <u> | 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타낸다. |
| <var> | 수학 표현 또는 프로그래밍에서 변수의 이름. |
| <wbr> | 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타낸다. |
이미지 & 멀티미디어
| 요소 | 내용 |
| <area> | 이미지의 핫스팟 영역을 정의하고 hyperlink를 추가할 수 있다. map 요소 안에서만 사용할 수 있습니다. |
| <audio> | 문서에 소리 콘텐츠를 포함할 때 사용한다. |
| <img> | 문서에 이미지를 넣는다. |
| <map> | area 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다. |
| <track> | 미디어 요소(audio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용 |
| <video> | 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입한다. |
이외에도 내장 콘텐츠, 스크립트, 수정사항 표시, 표 콘텐츠 등 다양한 태그 요소가 있는데 아래 그래프를 보면 가장 많이 사용하는 태그 25가지 요소를 확인할 수 있다.
가장 많은 태그 부터 정확히 알고 활용해볼 것!
<참고 및 인용>
https://www.w3schools.com/tags/default.asp
HTML Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
1) MDN Web Docs, 2022년 7월 22일 수정, 2022년 7월 22일 접속, https://developer.mozilla.org/ko/docs/Glossary/Tag
태그 - 용어 사전 | MDN
태그(tag)는 요소를 만들 때 사용합니다. 문단 태그 <p>처럼, 요소 이름을 부등호 사이에 넣어서 태그를 구성할 수 있습니다. 닫는 태그는 이름 앞에 슬래시 문자를 </p>와 같이 포함하며, 빈 요소
developer.mozilla.org
'HTML과 인터넷' 카테고리의 다른 글
| 웹페이지를 아름답게, CSS (0) | 2022.07.26 |
|---|---|
| 태그 간의 관계와 목록 (0) | 2022.07.24 |
| 태그(tag)와 속성(attribute) (0) | 2022.07.24 |
| HTML 코딩 실습 환경 준비하기 💻 (0) | 2022.07.22 |
| 코딩, HTML (0) | 2022.07.22 |