728x90
HTML 기본 구조
<! DOCTYPE입니다>
- 현재 문서가 HTML 문서 타입임을 명시
- DOCTYLE은 HTML 태그가 아니므로 웹 문서의 가장 첫 번째 줄에 와야 한다.
- <! DOCTYPE html> : HTML5 문서 타입
<html>
- HTML 문서의 루트(root) 요소 정의
<머리>
- HTML 문서의 메타데이터(metadata) 정의
- 문서에서 단 한 번만 사용할 수 있다.
- <title>, <style>, <meta>, <link> 태그 같은 웹 문서 정보 포함
cf) <header> : 한 문서에서 여러 번 사용할 수 있고, 사이트 로고나 메뉴 등 실제 문서 내용 포함
<제목>
- HTML 문서의 타이틀(title, 제목이나 이름)을 나타내는 태그
- 화면에 표시되지는 않으며, HTML 문서당 <title> 요소가 하나만 존재 가능
- 시각 장애인을 위한 스트린 리더에서도 읽을 수 있기 때문에, 필수적으로 제공되어야 한다.
- 웹 브라우저의 툴바(toolbar)에 표시된다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
- 검색 엔진의 결과 페이지에 제목으로 표시된다.
<바디>
- 웹 브라우저를 통해 보이는 내용(content) 부분
<h1>~<h6>
- 해당 영역의 제목(heading)을 나타낸다.
<p>
문단(paragraph)을 나타내는 태그
- 활용 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>머리말1</h1>
<h2>머리말2</h2>
<h3>머리말3</h3>
<h4>머리말4</h4>
<h5>머리말5</h5>
<h6>머리말6</h6>
<p>첫번째 문장입니다.</p>
<a href="https://www.naver.com/">네이버</a>
<a href="./01_helloworld.html">01_helloword.html</a>
<img
src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fpng.pngtree.com%2Fpng-vector%2F20231013%2Fourlarge%2Fpngtree-cute-vector-illustration-of-a-delicious-dessert-over-white-png-image_10157017.png&type=a340"
alt=""
/>
<img src="./img/dessert.jpg" alt="dessert, cake" />
</body>
</html>
728x90
'Frontend > HTML' 카테고리의 다른 글
| 6. 표 태그 (0) | 2024.07.03 |
|---|---|
| 5. 목록 태그 (ol, ul, dl) (0) | 2024.07.03 |
| 4. <div>, <span> (0) | 2024.07.03 |
| 3. Style 속성 (0) | 2024.07.02 |
| 2. 글로벌 속성 (0) | 2024.07.02 |