HTML 태그들

이의섭·2021년 12월 5일

HTML5

HTML(HyperText Markup Language)는 웹페이지를 기술하기 위한 마크업 언어이다. 웹페이지의 내용(content)와 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
👉 마크업 언어이고, 웹페이지의 내용과 틀을 담당한다. 이를 우리 사람(인체)라고 보면 좋을것같다.

멀티미디어
이는 플래시같은 비디오, 오디오를 보여줄 수 있고
그래픽
SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 보여줄 수 있다.
통신
서버와의 소켓 통신을 지원해 서버오의 양방향 통신이 가능! <form>태그로 할 수 있는거겠지?
H/W 접근
카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있어!
시맨틱 태그
시맨틱 태그를 사용해 브라우저, 검색엔진(컴퓨터), 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있어. 또한 덕분에 시각장애인도 웹을 사용할 수 있지

전체적인 구조

<!DOCTYPE html>
<html>
  <head>
  	//문서의 제목, 외부 파일의 참조(js,css,), 메타데이터(데이터를 설명하는 데이터)의 설정 등이 위치
   	// 여기에 기술된 정보들은 브라우저에 ❗표시되지 않는다❗
  </head>
  <body>
  	// 웹브라우저에 출력되는 모든 요소
  <body>
 </html>

메타데이터 바로가기

요소

html문서에서의 요소란 시작 태그와 종료 태그 그리고 그 사이에 위치한 content로 구성된다.

요소 = <시작태그> + content + </종료태그>

요소들 중에 content를 가질 수 없는 요소들이 있는데 이를 빈 요소라고 한다.

br
hr
img
input(개인적으로 헷갈림)
link
meta

얘네는 content가 필요 없으며 동시에 종료 태그또한 필요 없다.

콘텐츠 구획

address : 사람, 단체, 조직 등에 대한 연락처 정보를 나타냄
article : 문서, 페이지, 애플리케이션, 또는 사이트 내에 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
section : 서로 관계 있는 문서를 분리, 더 적합한 의미를 가진 요소가 없을 때 사용.

article이랑 section, div 무슨 차이?
article은 완전 독립, 그 부분만으로 주제가 이해 가는 부분. 좀더 자세함.
section은 내용적 관계
div는 아무의미 없이 묶기만 하는 역할
aside : 사이드바
header : 소개 및 탐색에 도움을 주는 콘텐츠. 제목, 로고, 검색 폼, 작성자 이름 등 포함
h1~h6 : 제목을 나타내는것.
main : 문서 body의 주요 콘텐츠를 나타냄. (지원하지 않는 브라우저도 있음)
nav : 네비게이션. 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 역할
footer : 구획의 작성자, 저작권 정보, 관련 문서 등의 정보

텍스트 콘텐츠

dl : Description List 설명 목록을 나타냄
dt : Description Term 글자
dd : Description Description 설명

위에서 dt와 dd는 dl안에서 세트로 같이 나와야 해.
<dt>-<dd> 혹은 <dt>-<dt>-<dd>, <dt>-<dd>-<dd> 상관 없음
figcaption : figure 요소를 설명
figure : 독립적인 컨텐츠를 표시. 가령 이미지같은 요소를 액자처럼 독립적인 컨텐츠로 담고 싶을 때