HTML에 대한 설명과 문서의 구조를 설명합니다
HTML(HyperText Markup Language)
문서의 형식을 규정하고 내용을 작성하는 하이퍼텍스트 언어
HTML 형식의 파일은 DOCTYPE 선언과 element들로 이루어져 있으며, 확장자는 .htm 또는 .html
요소(ELEMENT)와 태그(Tag)
요소
문서 일부분의 특징을 지정하는 마크업, 일종의 명령어
내용(content)와 이를 둘러싼 태그(tag)로 구성
태그
- 시작태그 : <태그이름 속성>
- 종료태그 : </태그이름>
- 단독태그 : <태그이름/>
- 시작태그와 종료태그는 같이 사용되는데, 이 때 태그는 엇갈려 중첩되면 안된다
속성
- 요소의 추가정보를 주기 위해서 사용
- 요소의 시작태그 내에 나타나며 이름="속성값"의 구조를 가짐
- 하나의 요소에 여러 개의 속성이 가능하며 빈 칸으로 구분
HTML 문서의 기본 구조
<DOCTYPE html>
문서가 HTML로 작성되었음을 알려줌
<html>
문서의 최상위 구조, <head> 태그와 <body>태그로 구성
<head>
본문에 대한 정보, <title>, <meta> 태그의 상위태그
- <title> : 문서 제목 태그
- <meta> : 문서 관리를 위한 메타정보를 기록하는 태그
- 속성 : authors, description, keyword, charset 등
<body>
본문
+) <meta>의 두 가지 사용법
<head>
<!--version.1-->
<meta name="authors" content="kjs">
<meta name="description" content="HTML 정리">
<meta name="keywords" content="HTML5">
<meta name="charset" content="UTF-8">
</head><head>
<!--version.2-->
<meta authors="kjs">
<meta description="HTML 정리">
<meta keywords="HTML5">
<meta charset="utf-8">
</head>문서 구조화 태그
컴퓨터가 문서의 구조와 내용을 파악할 필요성이 생겼기 때문에 HTML5에서는 문서의 내용을, CSS에서는 문서를 디자인하도록 역할을 나누었다
<header>
머리말 영역, 제목이나 소개
<footer>
꼬리말 영역, 저자 정보, 저작권 정보, 이용 조건, 관련 링크 등
<nav>
탐색 메뉴, 다른 웹문서나 문서 내의 다른 부분으로 이동하는 링크
<article>
독립된 본문, 웹문서에서 주요 내용을 가진 독립된 본문
- 여러 개의 <article> 요소 가능
- 별도의 제목, header, footer, section 요소 포함
<section>
문서 내 섹션 그룹, 문서 내에서 절단위 구분
<aside>
부수 정보, 본문의 내용과 구별되는 별개의 정보
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<header>
[header]
<nav>
[nav]
</nav>
</header>
<article>
[article]
<section>
[section1]
</section>
<section>
[section2]
</section>
</article>
<aside>[aside]</aside>
<footer>[footer]</footer>
</body>
</html>주석
주석 문장의 앞에 "<!--"를 문장의 뒤에는 "-->"를 붙인다
'기초공부 > WEB' 카테고리의 다른 글
| [HTML5]표 태그 (0) | 2019.03.20 |
|---|---|
| [HTML5]목록 태그 (0) | 2019.03.20 |
| [HTML5]생활코딩 WEB1 정리 (0) | 2019.03.19 |
| [HTML5]form 태그 (0) | 2019.03.19 |
| [HTML5]프레임 태그 (0) | 2019.03.19 |
