HTML
기본 정보
- 이름: HTML (HyperText Markup Language)
- 분류: 마크업 언어
- 최초 공개: 1993년
- 최신 표준: HTML Living Standard
- 주요 용도: 웹페이지 구조 정의
- 관련 주제: #HTML #웹개발 #프론트엔드 #마크업
개요
HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 마크업 언어이다.
웹 브라우저는 HTML 문서를 해석하여 화면에 표시하며, CSS는 디자인을 담당하고 JavaScript는 동적인 기능을 담당한다.
현대 웹 개발에서 HTML은 CSS, JavaScript와 함께 가장 기본이 되는 기술이다.
주요 특징
- 웹페이지의 구조 정의
- 태그(Tag) 기반 문법
- 플랫폼 독립적
- 모든 웹 브라우저에서 지원
- CSS 및 JavaScript와 함께 사용
- SEO의 기본 요소
기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hello HTML</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>주요 태그
| 태그 | 설명 |
|---|---|
<html> | HTML 문서 시작 |
<head> | 문서 정보 |
<body> | 화면 출력 영역 |
<title> | 브라우저 제목 |
<meta> | 메타 정보 |
<h1>~<h6> | 제목 |
<p> | 문단 |
<div> | 블록 영역 |
<span> | 인라인 영역 |
<a> | 링크 |
<img> | 이미지 |
<table> | 표 |
<form> | 입력 폼 |
제목 태그
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3><h1>은 페이지에서 가장 중요한 제목으로 사용하는 것이 권장된다.
링크
<a href="https://example.com">
홈페이지 이동
</a>이미지
<img src="image.jpg" alt="샘플 이미지">alt 속성은 접근성과 SEO를 위해 작성하는 것이 좋다.
목록
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>테이블
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>구름</td>
<td>30</td>
</tr>
</table>입력 폼
<form action="save.php" method="post">
<input type="text" name="name">
<input type="submit" value="저장">
</form>시맨틱 태그
HTML5에서는 의미를 가진 태그 사용이 권장된다.
<header><nav><main><section><article><aside><footer>
예시
<header>상단</header>
<nav>메뉴</nav>
<main>
<section>
내용
</section>
</main>
<footer>하단</footer>SEO 관련 태그
<title>페이지 제목</title>
<meta name="description" content="페이지 설명">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com">검색엔진 최적화를 위해 적절한 메타 태그 작성이 권장된다.
접근성
권장 사항
- 이미지에
alt작성 label과input연결- 제목 태그 순서 유지
- 버튼은
<button>사용 - 의미 있는 시맨틱 태그 사용
HTML5 주요 기능
- Video
- Audio
- Canvas
- SVG
- LocalStorage
- SessionStorage
- Drag & Drop
- Geolocation
HTML과 함께 사용하는 기술
장점
- 배우기 쉬움
- 모든 브라우저 지원
- SEO 친화적
- 웹 개발의 기본
- 다양한 프레임워크와 호환
단점
- 프로그래밍 언어가 아님
- 동적인 기능 구현 불가
- 디자인 기능이 제한적
- 데이터 처리 기능 없음
실무 메모
웹 개발 시 권장 사항
- HTML5 문법 사용
- 시맨틱 태그 적극 활용
UTF-8문자셋 사용lang="ko"지정- 이미지
alt작성 h1은 페이지당 1개 권장- 불필요한
div남용 지양 - CSS와 JavaScript는 외부 파일 분리 권장
관련 문서
출처
- WHATWG HTML Living Standard
- MDN Web Docs - HTML
- 위키백과 「HTML」