본문 바로가기
Tips

프론트엔드 개발 팁 모음 HTML(1)

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

'Tips' 카테고리의 다른 글

프론트엔드 개발 팁 모음 CSS(1)  (0) 2024.04.25
프론트엔드 개발 팁 모음 HTML(2)  (0) 2024.04.25
티스토리에 마크다운 스타일 게시물 작성하기  (4) 2018.09.12
프로그래밍 인터넷 강의 사이트 추천  (3) 2018.07.09
퀴즈렛사이트(무료)로 암기왕 되기 !  (1) 2018.06.28

관련글

티스토리툴바