코딩항해기
[HTML] HTML 규약 및 관례 본문
HTML 규약 및 관례
HTML에는 다양한 규약과 최선의 관례가 존재한다. 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있는 장점이 있다.
문서 형식 선언
HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 한다. (HTML5 기준)
<!DOCTPYE html>
문서 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
<!-- 추가적인 메타 정보, CSS, 스크립트 등 -->
</head>
<body>
<!-- 내용을 표시하는 요소들 (텍스트, 이미지, 링크 등) -->
</body>
</html>
유효한 마크업
문서는 유효한 마크업을 가져야 하며 W3C Markup Validation Service와 같은 도구를 사용하여 문서를 유효성 검사한다.
의미 있는 태그 사용 / 시맨틱 마크업
HTML5에서는 의미 있는 태그를 사용하여 문서를 정의한다. header, nav, section, article, footer 등의 태그를 활용하여 문서를 의미 있게 구조화한다. 요소의 의미와 역할을 설명할 수 있게 시맨틱 마크업을 사용한다. em 태그를 사용하여 강조된 텍스트를 나타내거나 strong 태그를 사용하여 중요한 텍스트를 표시한다.
[HTML] 시멘틱 태그
시멘틱 태그 Semantic Tag 시멘틱 태그는 HTML5에서 도입된 태그로, 문서의 구조와 의미를 명확히 하기 위해 사용된다. 주요 시멘틱 태그에는 , , , , , 등이 있으며, 각각의 태그는 고유한 의미와 용
minibcake.tistory.com
폼 요소
폼 요소 사용 시 label을 사용하여 입력 필드와 관련된 텍스트를 제공하고 for 속성을 통해 입력 필드와 레이블을 연결한다.
CSS와의 분리
스타일 정보는 주로 외부 CSS 파일을 사용하여 제공하고 HTML 파일 내부에서 스타일을 직접 지정하지 않는다.
접근성
웹 접근성을 고려하여 시각적, 청각적 장애 등을 고려한 디자인 및 마크업을 수행한다.
주석
HTML 문서에는 주석을 사용하여 코드를 설명하고 유지 보수를 쉽게 만든다.
크로스 브라우징
HTML 코드가 여러 웹 브라우저에서 동일하게 렌더링되도록 테스트하고 필요한 경우 브라우저별 CSS 및 JavaScript 조정을 수행한다.
'HTML CSS JS' 카테고리의 다른 글
| [HTML] form validation (유효성 검증) (0) | 2025.01.03 |
|---|---|
| [CSS] CSS 방법론 (0) | 2024.12.14 |
| [CSS] CSS-in-JS (0) | 2024.12.13 |
| [CSS] Tailwind CSS (0) | 2024.12.09 |
| [Web] DOM (0) | 2024.12.06 |
