Tips HTML(1)
1.doctype 명시하기
- 브라우저 렌더링 모드 설정
- 최신 브라우저는 HTML5를 기본 렌더링 모드로 사용하기 때문에, DOCTYPE 선언이 없어도 대부분의 경우 정상적으로 작동합니다. doctype을 명시하여 이전 버전의 브라우저와의 호환성을 유지하고, 문서가 정확하게 렌더링되도록 합니다.
- 문서 유효성 검사
- 코드 오류를 방지하고 웹 표준을 준수하는 데 도움을 줍니다.
- 문서 구조 파악
- 브라우저가 문서 구조를 빠르게 파악하도록 돕습니다.
- 주의 사항
- DOCTYPE 선언은 문서의 최상단에 한 번만 선언해야 합니다.
- 선언 시 대소문자를 구분하지 않아도 됩니다.
- HTML5 이후 버전에서는
<!DOCTYPE html>선언만 사용하며, 이전 버전의 형식은 더 이상 사용되지 않습니다.
2.권장되지 않는 태그 사용을 피하세요
<b>(굵게 표시): 과거에는 텍스트를 강조하기 위해 사용되었지만, 현재는<strong>태그를 사용하는 것이 권장됩니다.<strong>태그는 의미적 강조를 나타내며, 화면 리더와 같은 보조 기술에서도 인식될 수 있습니다.<i>(기울임꼴): 과거에는 텍스트를 기울여 표시하기 위해 사용되었지만, 현재는<em>태그를 사용하는 것이 권장됩니다.<em>태그는 강조보다는 텍스트의 특별한 부분을 나타내는 데 사용됩니다.<s>(취소선): 과거에는 텍스트를 취소선으로 표시하기 위해 사용되었지만, 현재는<s>태그를 사용하는 것이 권장됩니다.<s>태그는 텍스트가 잘못되었거나 더 이상 유효하지 않음을 나타내는 데 사용됩니다.<u>(밑줄): 과거에는 텍스트에 밑줄을 표시하기 위해 사용되었지만, 현재는<u>태그를 사용하는 것이 권장됩니다.<u>태그는 텍스트가 링크임을 나타내는 데 사용됩니다. 하지만, 실제 링크를 표현하기 위해서는<a>태그를 사용하는 것이 더 정확하고 의미적입니다.<font>: 글꼴, 크기, 색상 등을 지정하는 데 사용되었지만, CSS를 사용하는 것이 더 권장됩니다. CSS는 더욱 유연하고 효율적인 방식으로 스타일을 적용할 수 있도록 합니다.<center>: 텍스트를 가운데 정렬하는 데 사용되었지만, CSS를 사용하는 것이 더 권장됩니다. CSS는 더욱 정확하고 다양한 정렬 방식을 제공합니다.<applet>: Java 애플리케이션을 실행하는 데 사용되었지만, 보안 및 호환성 문제로 인해 현재는 거의 사용되지 않습니다.<marquee>: 텍스트를 움직이는 데 사용되었지만, 접근성 문제와 시각적 오염을 유발할 수 있어 사용을 피하는 것이 좋습니다.
3.여러개의 h1 태그를 한 페이지에서 사용하는 것을 피하세요
<h1> 태그는 페이지 콘텐츠의 전반적인 목적을 나타내기 위해 페이지 상단에 자주 사용됩니다. 검색 엔진은 다른 요소보다 더 높은 평가를 받기 때문에 SEO에서 중요한 역할을 합니다. 검색 결과에도 표시할 수 있습니다.
추가로,
- 같은
section내에서 h1, h3, h2처럼 순서를 섞는 것 보다 h1, h2, h3 제목 요소의 순서대로 작성하는 것이 좋습니다. role="heading"속성을 사용하여 제목 요소의 역할을 명시적으로 지정합니다.- 제목 요소는 키보드만으로도 쉽게 이동하고 선택할 수 있어야 합니다.
4.시간을 표시할 때 <time datetime=””> 의 형태로 사용하세요
- 브라우저 및 검색 엔진이 날짜와 시간 정보를 이해하여 더욱 정확한 정보 제공 및 검색 결과 최적화에 도움을 줍니다.
- 카운트다운 타이머, 자동 업데이트와 같은 기능을 구현할 때 날짜와 시간 정보를 기반으로 동적인 기능 구현가능 합니다.
- 화면 리더 사용자에게 날짜와 시간 정보를 명확하게 제공하여 접근성 측면에서 이점이 있습니다.
- 주의점
- datetime 속성은 ISO 8601 형식을 따르는 문자열 값을 사용해야 합니다.
- 예시)
2024-04-17T16:16:00+09:00(현재 시각, 한국 표준시)
This post is licensed under CC BY 4.0 by the author.