태그
HTML에서 태그란 요소라고도 부르며, HTML 문서를 구성하는 기본 단위이다.
HTML5 문서의 구조
HTML5 문서는 <!DOCTYPE html>과 <html>, <head>, <body>의 세 가지 기본 태그로 이루어져 있다.
<!DOCTYPE html>
<html>
<head>
<title>제목 영역</title>
</head>
<body>
<!-- 본문 영역 -->
</body>
</html>
<!DOCTYPE html>
HTML5 문서를 선언하는 구문으로, 이 문서가 HTML5로 작성된 웹 문서임을 웹 브라우저에 알려주는 역할을 한다. 이 구문은 생략할 수 있지만 하위 호환성을 위해 작성할 것은 권장한다.
<html> ~ </html>
HTML5 문서의 시작과 종료를 알린다. <html> 태그는 문서의 최상위(root) 요소이기도 하며, 언어(lang) 속성을 사용하여 주된 언어 값을 설정할 수 있다.
<head> ~ </head>
웹 페이지의 정보를 정의하는 곳으로, 다음과 같은 태그를 사용할 수 있다.
<!-- <title> 태그
<title> 태그에 작성한 내용이 웹 브라우저의 제목 표시줄에 나타난다. -->
<title>Page Title</title>
<!-- <meta> 태그
문서를 만든 이, 검색시 키워드, 웹 페이지 정보, 리프레시 등을 작성한다. -->
<meta charset="UTF-8">
<meta name="author" content="Hong GilDong">
<meta http-equiv="refresh" content="10, url">
<!-- <base> 태그
문서 내 모든 링크의 기준이 되는 url을 지정한다. -->
<base href="url" target="_blank">
<!-- <style> 태그
CSS3와 같은 문서 장식 프로그램이 위치하는 공간이다. -->
<style>
body { background-color: yellow; }
</style>
<!-- <link> 태그
외부 문서 혹은 사이트 자원을 연결한다. -->
<link rel="stylesheet" href="mystyle.css">
<!-- <script> 태그
자바스크립트 등의 다양한 프로그램이 위치하는 공간이다. -->
<script>
function myFunction {
document.getElementById("demo").innerHTML="Hello JavaScript";
}
</script>
<body> ~ </body>
HTML5 문서의 본문을 작성하는 공간이다.
HTML5 문서의 작성 규칙
- 태그 이름은 대소문자를 구분하지 않는다. 하지만 소문자를 사용할 것을 권고한다.
- 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리한다.
- 태그의 포함 관계를 표현하기 위해 들여 쓰기를 한다.
- 태그의 쌍을 겹치지 않고 완벽히 내포시킨다.
- 종료 태그를 반드시 사용한다.
- 주석은 <!-- 주석 내용 -->을 사용한다.
태그의 속성
태그의 속성은 태그의 종속적인 정보를 표현하기 위해 사용한다. 따라서 속성은 태그 없이 단독으로 사용할 수 없다. 속성은 다음과 같이 '속성="값"' 형태로 작성하는데, 하나의 태그에 같은 속성을 한 번 이상 쓸 수 없다. 속성에 값이 없는 경우 속성 이름만 작성할 수 있다.
<시작 태그 속성="값">내용</종료 태그>
시맨틱 문서 구조
HTML5 웹 표준에서는 각 영역을 구분하는 구조적 태그 요소를 정의하여 사용하도록 권장하고 있다.
<header>
HTML5 문서의 머리말 영역으로, 중요한 정보를 표시한다. 예를 들면 사이트의 제목, 로고 등을 배치한다.
<nav>
네비게이션 영역으로, 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용한다.
<section>
문서의 영역을 구성할 때 사용한다. <section> 태그 내에 <header>, <article> 태그 등을 포함할 수 있다.
<article>
독립된 주요 콘텐츠 영역을 표시한다.
<aside>
주요 콘텐츠 이외에 남은 콘텐츠를 표시한다. 예를 들면 사이드 바 등이 있다.
<footer>
사이트의 자세한 정보를 표시한다. 예를 들면 저작권 정보, 관리자 정보, 회사 정보 등을 배치한다.
'Web > HTML' 카테고리의 다른 글
| [HTML] 목록 (0) | 2024.09.14 |
|---|---|
| [HTML] 하이퍼링크 (1) | 2024.09.14 |
| [HTML] 특수문자 처리 방법 (0) | 2024.09.14 |
| [HTML] 텍스트 관련 태그 (0) | 2024.09.14 |
| [HTML] 웹 (0) | 2024.09.14 |