HTML 표준 가이드 메타 태그 설정 메타 태그 설정 본 페이지는 퍼블리싱 작업중 HTML의 표준화를 위해 작성되었습니다.   태그 검색 결과에서 웹페이지의 제목으로 표시되며, 사용자에게 페이지 내용을 요약해 알려주는 중요한 요소입니다. 브라우저 탭에도 제목으로 표시됩니다 50~60자 이내로 간결하게 작성하며, 페이지의 핵심 내용을 포함합니다. 페이지마다 고유한 제목을 설정해 중복을 피하고, 중요한 키워드를 자연스럽게 포함합니다.  <meta name="description"> 태그 페이지에 대한 요약 정보를 제공합니다. 검색 결과에 표시되며, 사용자에게 페이지 내용을 미리 알려주는 역할을 합니다. 150~160자 이내로 작성해 검색 엔진에 잘 표시되도록 합니다. 매력적이고 클릭을 유도할 수 있는 문구를 포함합니다. 페이지의 주요 키워드를 포함하되, 내용과 부합해야 합니다.  <meta name="robots"> 태그 검색 엔진이 페이지를 크롤링하고 인덱싱할 때의 지침을 제공합니다. index / noindex : 페이지를 검색 엔진 인덱스에 포함할지 여부를 지정. follow / nofollow : 페이지 내 링크를 따라갈지 여부를 설정. 예를 들어, 인덱싱을 원하지 않는 페이지에 noindex, nofollow 로 설정합니다.  <meta name="keywords"> 태그 페이지와 관련된 키워드를 명시합니다. 현재는 대부분의 검색 엔진에서 무시되지만, 여전히 일부 SEO 도구에서 분석 요소로 사용됩니다. 5~10개의 키워드를 쉼표로 구분하여 간략하게 작성합니다. 페이지의 핵심 주제와 관련된 키워드를 포함하되, 중복 키워드나 스팸성 키워드는 피합니다.  <meta charset="UTF-8"> 태그 웹페이지의 문자 인코딩 방식을 지정합니다. UTF-8은 대부분의 언어와 특수 문자를 지원하기 때문에 널리 사용됩니다.  <meta name="viewport"> 태그 모바일 기기에서 화면의 초기 크기를 설정합니다. 반응형 웹 디자인을 구현할 때 필수적입니다. width=device-width : 디바이스의 가로 폭에 맞게 화면 너비를 설정. initial-scale=1.0 : 기본 확대 비율을 설정하여 페이지가 사용자 디바이스에 맞게 표시되도록 설정.  <meta property="og:title"> 태그 페이지가 소셜 미디어에서 공유될 때 표시될 정보를 설정합니다. Facebook, Twitter와 같은 플랫폼에서 미리보기 정보로 활용됩니다. og : 소셜 미디어에서 표시될 제목. og : 짧고 간결한 설명. og : 고해상도 이미지를 사용하여 시각적 매력을 높임. og : 해당 페이지의 정확한 URL을 사용.  <link rel="canonical"> 태그 동일한 콘텐츠가 여러 URL로 접근 가능한 경우, 검색 엔진에 대표 URL을 명시하여 중복 콘텐츠 문제를 방지합니다. 대표 콘텐츠로 인식되길 원하는 URL을 지정해 중복 페이지가 생성되는 것을 방지합니다. 특히 필터 또는 정렬 옵션을 통해 동일한 페이지가 여러 URL로 접근 가능한 경우 유용합니다.  <meta http-equiv="X-UA-Compatible"> 태그 페이지가 Internet Explorer에서 특정 모드로 렌더링되도록 지시합니다. 최신 렌더링 엔진을 사용하도록 IE=edge 로 설정하여 페이지가 최신 브라우저 표준에 맞게 표시되도록 합니다. 제목 태그 (<h1>~<h6>)   제목 태그 ( <h1> ~ <h6> ) 콘텐츠의 구조와 중요도에 따라 제목을 지정하여 계층 구조를 만듭니다. <h1> 태그는 페이지당 하나만 사용하며, 가장 중요한 제목으로 설정. <h2> ~ <h6> 태그는 내용의 중요도에 따라 순차적으로 사용. <h1>페이지 메인 제목</h1> <h2>부제목 1</h2> <h3>소제목 1.1</h3> <h2>부제목 2</h2>   aria-label 속성 aria-label 속성이 필요한 경우 1. 레이블 텍스트가 없는 경우 <input> 필드에 <label> 요소가 없거나 시각적으로 레이블이 없는 경우에는 aria-label 이 필요합니다. 예를 들어, 검색 상자, 텍스트 입력 창 등에 추가하여 필드의 목적을 설명할 수 있습니다. <input type="text" aria-label="Search"> 2. 레이블을 커스터마이징하고 싶은 경우 : 레이블을 커스터마이징하거나 추가 설명이 필요할 때도  aria-label 을 사용하여 스크린 리더가 필드의 의미를 더 잘 전달하도록 할 수 있습니다. 3. 아이콘만 있는 입력 필드   aria-label 은 화면에 보이는 레이블이 없고 아이콘으로만 이루어진 입력 필드에 유용합니다. <input type="text" aria-label="Phone number"> <i class="icon-phone"></i> aria-label 속성이 필요하지 않은 경우 1. 명확한 레이블이 있는 경우 <label> 요소로 이미 연결된 레이블이 있다면 aria-label 을 추가할 필요없음 aria-label 속성   aria-label 속성 aria-label 속성이 필요한 경우 1. 레이블 텍스트가 없는 경우 <input> 필드에 <label> 요소가 없거나 시각적으로 레이블이 없는 경우에는 aria-label 이 필요합니다. 예를 들어, 검색 상자, 텍스트 입력 창 등에 추가하여 필드의 목적을 설명할 수 있습니다. <input type="text" aria-label="Search"> 2. 레이블을 커스터마이징하고 싶은 경우 : 레이블을 커스터마이징하거나 추가 설명이 필요할 때도  aria-label 을 사용하여 스크린 리더가 필드의 의미를 더 잘 전달하도록 할 수 있습니다. 3. 아이콘만 있는 입력 필드   aria-label 은 화면에 보이는 레이블이 없고 아이콘으로만 이루어진 입력 필드에 유용합니다. <input type="text" aria-label="Phone number"> <i class="icon-phone"></i> aria-label 속성이 필요하지 않은 경우 1. 명확한 레이블이 있는 경우 <label> 요소로 이미 연결된 레이블이 있다면 aria-label 을 추가할 필요없음 lang 속성   lang 속성 lang 속성은 <html> 태그에 설정하는 것이 일반적입니다. 예를 들어, 문서가 한국어로 작성되었으면 lang="ko"를 지정하고, 영어로 작성된 경우 lang="en"을 지정합니다. <html lang="ko-KR"> lang 속성은 웹 접근성 을 개선하고 SEO 성능을 높이는 중요한 역할을 합니다. 따라서 HTML 문서의 <html> 태그에 적절한 lang 속성을 설정하는 것이 좋습니다.   label 태그   label 태그 <label> 요소는 일반적으로 <input>, <textarea>, <select>와 같은 폼 필드와 연결하여 사용합니다. <label>과 폼 필드는 for와 id 속성으로 연결됩니다. <form> <label for="email">Email Address</label> <input type="email" id="email" name="email"> </form>  label 태그를 사용하지 않아도 되는 경우 시각적으로 명확하게 구분된 필드 : 폼 필드와 그에 대한 설명(예: 텍스트)이 분명히 인식될 수 있도록 디자인된 경우, 일부 사용자들은 <label> 없이도 필드의 목적을 이해할 수 있습니다. 간단한 폼 필드 : 예를 들어, <input type="text"> 필드가 이미 매우 직관적인 설명을 가지고 있고, 특별한 추가 설명이 필요하지 않다고 판단되는 경우에는 <label> 없이도 사용할 수 있습니다.  label 태그를 사용해야 하는 경우 폼 필드와 관련된 설명 이 필요할 때는 <label> 을 반드시 사용하는 것이 좋습니다. 특히 다음과 같은 경우에는 <label> 이 필요합니다: 필드에 대한 설명이 명확하지 않거나 추가적인 설명이 필요한 경우: 예를 들어, 이메일 주소 , 비밀번호 와 같은 입력 필드는 반드시 해당 필드와 연결된 <label> 을 가져야 합니다. 스크린 리더 사용자 : 스크린 리더는 폼 필드를 읽을 때 <label> 요소를 사용하여 필드에 대한 설명을 제공합니다. 따라서 모든 입력 요소에 대한 설명을 제공하는 <label> 을 사용해야 합니다. alt 속성   alt 속성 alt 속성은 <img> 태그에서 사용됩니다. 이미지의 내용이나 기능을 간결하고 정확하게 설명하는 텍스트를 제공하는 것이 좋습니다. <img src="logo.png" alt="Company Logo">  alt 속성을 사용하지 않아도 되는 경우 이미지가 순수한 장식용일 때 : 이미지가 페이지의 디자인적 요소로만 사용되는 경우, alt 속성은 빈 문자열( alt="" )로 설정합니다. 이는 스크린 리더가 이미지를 무시하게 합니다. 이미지가 기능을 갖지 않는 경우 : 이미지가 페이지에서 특별한 의미를 갖지 않거나 정보 전달을 위한 것이 아니라면, alt 속성을 생략할 수도 있습니다. 그러나 대부분의 경우 alt 속성을 사용하는 것이 권장됩니다.