HTML Tags (Element)1

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

HTML

HTML은 웹 사이트, 혹은 웹 애플리케이션 문서의 구조를 담당하고 있다.

이 구조는 자유롭게 작성이 가능하지만, 많은 사람들이 Tag의 의미와 사용법을 무시한 채 디자인만 생각하고 작성하는 경우가 많다. 물론 Tag의 의미와 사용법을 무시하더라도, 디자인을 구현하는 데에는 영향이 없는 경우도 있다. 때문에 이 부분을 더 소홀하게 여기는 경우가 많은 것 같다. 하지만 시맨틱 한 웹 환경과 웹 접근성까지 고려한다면 이 부분에 대해서 한 번쯤 생각해 볼 필요가 있다. (엘리먼트들을 전부 외워둘 필요는 없지만, 어떤 엘리먼트들이 있는지 정도는 한 번쯤 체크해 두어야 나중에 찾아볼 수 있을 것이므로 확인해 두는 것이 필요하다.)

HTML 엘리먼트의 분류

엘리먼트는 아래의 카테고리에 속할 수 있다. 또한 하나의 엘리먼트가 여러 개의 카테고리에 중복으로 속할 수도 있다.

구분	설명
metadata (메타데이터)	엘리먼트가 감싸고 있는 데이터의 성격을 정의하거나 문서를 설명함
flow content (플로우 컨텐츠)	body 엘리먼트 하위에서 사용되는 엘리먼트들이나 응용프로그램(애플리케이션)에서 사용되는 엘리먼트들의 대부분을 말함. flow content는 문자나 컨텐츠를 자식으로 가져야 하고, 여기서 말하는 컨텐츠는 img 엘리먼트와 같이 외부의 자원을 문서에 삽입할 때 사용하는 엘리먼트들을 의미한다. (audio, canvas, embed, iframe 등)
section content (섹션 컨텐츠)	기능이나 의미에 따라서 구간을 구분짓는 엘리먼트. ex : nav 엘리먼트는 문서 안에서 네비게이션에서 사용되는 엘리먼트들을 감싸서 네비게이션 영역을 분류할 수 있다.
heading content (헤딩 컨텐츠)	제목을 표현할 때 사용하는 엘리먼트 (h1 ~ h6, hgroup)
phrasing content (구문 컨텐츠)	문자나 구문을 표시하는 엘리먼트. 구문 컨텐츠가 모여서 문단 (paragraphs)를 만든다.
embedded content (포함된 컨텐츠)	다른 자원을 문서에 삽입하는 엘리먼트를 의미한다.
interactive content (대화형 컨텐츠)	사용자와 상호작용을 하기 위한 엘리먼트 (a, input, button과 같은 엘리먼트들이 있다.)

head element

head element 내부에서 사용하는 element들은 문서를 작성하는 필요한 외부 문서를 불러오는 데 사용하거나, 문서의 정보를 브라우저가 확인할 수 있도록 알려주는 기능을 담당한다.

Element	설명
title	문서마다 유일한 내용 (tip : 페이지와 웹사이트 정보를 함께 표기하는 것이 좋다.)
link	head element 내부에만 위치할 수 있으며, 스타일시트, 파비콘 등 외부 문서를 불러올 때 사용한다. rel : 외부문서 (소스)와의 관계 (필수) href : 링크 경로 type : 미디어 타입, 링크된 외부 문서 (소스)의 미디어 타입
base	상대경로 작성 시 기준 URL 각 문서에 한번 작성하며 일부에서만 사용할 경우 문제가 될 수 있기 때문에 주의해야 한다.

meta 태그

• charset : 문자의 인코딩 방식을 선언한다.

  <meta charset="UTF-8">

name과 content

name과 content 특성을 함께 사용해서 문서의 메타 데이터를 제공한다.

• keyword : 웹페이지의 홍보수단으로 검색 키워드를 지정 가능하며, ", "로 구분하여 선언한다.

  <meta name="keyword" content="HTML, tag, element, Frontend">

• subject : 문서의 제목정보

  <meta name="subject" content="HTML tag">

• description : 웹페이지 요약정보, 제작자 정보(author), 저작권정보(copyright)

  <meta name="description" content="HTML tag 정리">

• author : 문서의 저작자

  <meta name="author" content="Kim Kyuree">

• viewport : 반응형 설정을 위한 정보

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3">

  • width : 가로크기
  • height : 세로크기
  • initial-scale : 초기렌더링 비율
  • user-scalable : 축소, 확대 기능
  • maximum-scale : 최대 확대 비율
  • minimum-scale** : 최소 축소비율

참고자료

• 콘텐츠 카테고리 - mdn web docs
• 문서 레벨 메타데이터 요소 - mdn web docs