HTML 규약 및 관례
1. HTML 규약 및 관례
- HTML에는 다양한 규약과 최선의 관례가 존재합니다.
- 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있습니다.
2. 문서 형식 선언
- HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 합니다. (HTML5 기준)
<!DOCTPYE html>
3. 문서 구조
- HTML 문서는 일반적으로 다음과 같은 구조를 따릅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문저 제목</title>
<!-- 추가적인 메타 정보, 스타일시트, 스크립트 등 -->
</head>
<body>
<!-- 내용을 표시하는 요소들 (텍스트, 이미지, 링크 등) -->
</body>
</html>
3. 유요한 HTML
- HTML 문서는 유효한 마크업을 가져야 합니다.
- W3C Markup Validation Service와 같은 도구를 사용하여, 문서를 유효성 검사할 수 있습니다.
4. 의미 있는 태그 사용
- HTML5에서는 의미 있는 태그를 사용하여, 문서를 정의해야 합니다.
- <header>, <nav>, <section>, <article>, <footer> 등의 태그를 활용하여, 문서를 의미 있게 구조화합니다.
5. 시맨틱 마크업
- 요소의 의미와 역할을 설명할 수 있게 시맨틱 마크업을 사용합니다.
- 예를 들어, <em> 태그를 사용하여 강조된 텍스트를 나타내거나, <strong> 태그를 사용하여 중요한 텍스트를 표시합니다.
6. 폼 요소
- 폼 요소 사용 시, 레이블(<label>)을 사용하여 입력 필드와 관련된 텍스트를 제공하고, for 속성을 통해 입력 필드와 레이블을 연결합니다.
7. CSS와의 분리
- 스타일 정보는 주로 외부 CSS 파일을 사용하여 제공하고, HTML 파일 내부에서 스타일을 직접 지정하지 않는 것을 권장합니다.
8. 접근성
- 웹 접근성을 고려하여 시각적, 청각적 장애 등을 고려한 디자인 및 마크업을 수행해야 합니다.
9. 주석
- HTML 문서에는 주석을 사용하여, 코드를 설명하고 유지 보수를 쉽게 만드는 것이 좋습니다.
10. 크로스 브라우징
- HTML 코드가 여러 웹 브라우저에서 동일하게 렌더링되도록 테스트하고, 필요한 경우 브라우저별 CSS 및 JavaScript 조정을 수행합니다.
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| box-sizing 속성 (0) | 2023.11.04 |
|---|---|
| HTML SEO(검색 엔진 최적화) 기본사항 (1) | 2023.10.21 |
| HTML 유효성 검사 (0) | 2023.10.15 |
| NHN CSS 컨벤션 (0) | 2023.10.12 |
| role 속성 (0) | 2023.09.25 |