HTML
HTML은 Hypertext Markup Language로 브라우저로 하여금 웹 페이지가 어떻게 구조화되어 있는지 알 수 있도록 하는 마크업 언어이다. HTML은 요소로 구성이 되어 있다.
<p>Hello this is an element of HTML.</p>
- 여는 태그(Opening tag): 요소의 이름과 열고 닫는 꺽쇠 괄호<>로 구성되어 있다. 위의 코드에서 <p>가 바로 여는 태그인다.
- 닫는 태그(Closing tag): 요소의 이름 앞에 슬래시/ 가 있는 것을 제외하고 여는 태그와 동일하게 구성되어 있다. 위의 코드에서 </p> 가 바로 닫는 태그이다.
- 콘텐츠(Content): 여는 태그와 닫는 태그 사이에 있는 내용이다. 위의 코드에서 Hello this is HTML Element. 가 콘텐츠이다.
- 요소(Element): 여는 태그와 닫는 태그, 콘텐츠 전부를 요소라고 한다. 위의 코드에서는 <p>Hello this is HTML Element.</p>가 요소이다.
<img scr="picture.jpg" />
- img 태그와 같이 태그 내부에 내용이 없다면, self-closing tag를 사용할 수 있으며, <tag /> 로 표현한다.
HTML의 계층 구조(Tree Structure)
HTML은 html 요소를 기준점으로 하는 계층 구조로 되어 있다. HTML의 트리 구조를 보면 아래와 같이 나타낼 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
</head>
<body>
<h1>Hello World></h1>
<span>Welcome</span>
</body>
</html>
- document
- html
- head
- title
- body
- h1
- span
- head
- html
HTML의 태그 종류
HTML의 Tag 종류는 여러가지가 있다. 그 중에서 대표적인 몇 가지만 추려냈다.
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <input>
- <div>
- <span>
- <p>
- <a>
- <ul>, <ol>, <li>
- <button>
<h1>, <h2>, <h3>, ><h4>, <h5>, <h6>
h1~6 태그는 제목을 설정하며 숫자에 따라 제목의 크기가 달라진다.
See the Pen h tag by 한정윤 (@hanjy2008) on CodePen.
<input>
input 태그는 웹에서 입력을 받을 수 있게 해주는 태그이다. 속성에 따라 여러 방식의 입력 타입을 갖는다.
See the Pen input tag by 한정윤 (@hanjy2008) on CodePen.
<div>
div 태그는 플로우 콘텐츠를 위한 통용 컨테이너이다. div는 컨테이너로서 아무것도 표현하지 않는다. div 태그는 콘텐츠의 길이와 상관없이 한 줄 전체를 차지한다.
<span>
span 태그는 구문 콘텐츠를 위한 통용 컨테이너이다. div와 같이 컨테이너로서 아무것도 표현하지 않는다. span태그는 콘텐츠의 길이만큼 자리를 차지한다.
See the Pen div & span by 한정윤 (@hanjy2008) on CodePen.
💡 div와 span의 차이점은 div는 블록 레벨 요소이고 span은 인라인 요소이다. 따라서 div는 콘텐츠의 길이와 상관없이 한줄을 차지하고, span은 콘텐츠의 길이만큼만 차지한다.
<p>
p태그는 하나의 문단을 나타내며, 블록 레벨 요소이다.
See the Pen p tag by 한정윤 (@hanjy2008) on CodePen.
<a>
a태그는 앵커(anchor) 요소로 href 특성을 통해서 같은 페이지나 다른 페이지의 어느 위치, 파일, 이메일 주소와 그 외의 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
See the Pen a tag by 한정윤 (@hanjy2008) on CodePen.
<ul>, <ol>, <li>
ul태그는 unordered list로 순서가 없는 리스트를 만들 때 사용하는 태그이다.
ol태그는 ordered list로 순서가 있는 리스트를 만들 때 사용하는 태그이다.
li태그는 list로 <ul>태그나 <ol> 태그의 리스트의 내용을 담는 태그이다.
See the Pen ul, ol, li tag by 한정윤 (@hanjy2008) on CodePen.
<button>
button태그는 버튼을 만들 때 사용하는 태그이다.
See the Pen button tag by 한정윤 (@hanjy2008) on CodePen.
HTML의 시맨틱 태그
HTML5에서는 시맨틱 웹을 중요시하게 되면서 만들어진 태그들이다. 시맨틱 태그로 만들어진 레이아웃은 사람뿐만 아니라 컴퓨터도 읽을 수 있게 된다.
시맨틱 태그의 장점
- 검색 엔진이 웹 페이지의 내용이 어디인지를 알 수 있어서 검색 노출을 용이하게 할 수 있다.
- 시각 장애가 있는 사용자들이 화면 판독기로 페이지를 탐색할 때 시맨틱 태그로 내용을 알 수 있다.
- 개발자에게 태그 안에 채워져야할 데이터 유형을 제안할 수 있다.
- 무수한 div로 이루어진 의미없는 코드보다 의미 있는 코드 블록을 찾는 것이 쉽다.
시맨틱 태그의 종류
- <header>
- <nav>
- <main>
- <article>
- <section>
- <aside>
- <footer>
<header>
header 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
<nav>
nav 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로 링크를 보여주는 구획을 나타낸다.
<main>
main 요소는 문서<body>의 주요 콘텐츠를 나타낸다.
<article>
article 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
<section>
section 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
<aside>
aside 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
<footer>
footer 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다. 주로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.