HTML 기초 문법

기초 문법

HTML이란?

HTML은 Hyper Text Markup Language의 약자입니다.
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다.
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.

HTML 태그(tag)

HTML 태그는 태그 이름을 꺾쇠 괄호(<>)로 감싸서 표현합니다.

문법
1. <태그이름> // 시작 태그
2. </태그이름> //종료 태그

HTML 태그는 보통 시작태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성됩니다.
종료 태그는 시작 태그와 전부 똑같지만,태그 이름 앞에 슬래시(/)가 존재합니다.
태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다.

<img><br><hr>등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.

시맨틱 태그

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻으로 의미를 가지는 태그가 시맨틱 태그입니다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 됩니다.

종류

<header>	<header> 태그는 머리말 영역으로 문서 또는 섹션의 헤더를 나타낼 때 사용합니다.
<nav>	<header> 태그는 내비게이션를 나타낼 때 사용합니다.
<main>	<main> 태그는 문서의 주요 컨텐츠를 나타낼 때 사용합니다.
<aside>	<aside> 태그는 사이드에 위치하는 공간을 나타낼 때 사용합니다.
<section>	<section> 태그는 주제별 그룹의 컨텐츠 섹션을 나타낼 때 사용합니다.
<article>	<article> 태그는 문서 본문 중 독립된 콘텐츠(개별 뉴스 기사, 게시물)를 나타낼 때 사용합니다.
<footer>	<footer> 태그는 꼬리말을 나타낼 때 사용합니다.
<address>	<address> 태그는 컨텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담을때 사용합니다.
<hgroup>	<hgroup> 태그는 제목과 관련된 부제목을 묶을 때 사용합니다.
<details>	<details> 태그는 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure>	<figure> 태그는 이미지, 다이어그램, 사진 등 독립적인 컨텐츠를 정의할 때 사용됩니다.
<figcaption>	<figcaption> 태그는 <figure>요소의 설명 캡션(caption)정의합니다.
<mark>	<mark> 태그는 현재 맥락에 관련이 깊거나 중요한 부분을 강조합니다.
<time>	<time> 태그는 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능을 구현합니다.
<summary>	<summary> 태그는 details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.