<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>위의 코드는 HTML 문서의 기본적인 구조를 나타내고 있습니다. 각 요소가 왜 필수적인지에 대해 자세히 설명하겠습니다.
1. `<!DOCTYPE html>`: 이 부분은 문서의 유형을 지정하는 것으로, HTML 문서임을 나타냅니다. 이것은 웹 브라우저에게 문서가 HTML 형식임을 알리는 역할을 합니다.
"웹 브라우저에게 문서가 HTML 형식임을 알리는" 일이 왜 중요한데?
"웹 브라우저에게 문서가 HTML 형식임을 알리는" 일은 중요한 이유가 있습니다. 여기에는 몇 가지 이유가 있습니다:
1. 올바른 렌더링: 웹 브라우저는 웹 페이지를 해석하고 렌더링하여 사용자에게 보여줍니다. HTML 문서는 웹 페이지의 구조와 내용을 정의하는 역할을 합니다. 올바른 HTML 형식으로 작성된 문서는 웹 브라우저가 문서를 정확하게 이해하고 제대로 렌더링할 수 있도록 도와줍니다.
2. 호환성: 웹 브라우저는 다양한 기종과 버전이 있습니다. 각 브라우저는 HTML, CSS, JavaScript 등을 해석하는 방식이 조금씩 다를 수 있습니다. `<!DOCTYPE html>` 선언을 사용하여 문서가 HTML 형식임을 명시하면, 웹 브라우저는 문서를 표준에 따라 해석하고 호환성 문제를 최소화할 수 있습니다.
3. 유효성 검사: HTML 문서가 올바른 형식을 갖추었는지 검사하는 유효성 검사기들이 있습니다. 예를 들어, W3C (World Wide Web Consortium)에서 제공하는 유효성 검사기를 사용하면 HTML 문서가 표준에 부합하는지 확인할 수 있습니다. 올바른 `<!DOCTYPE>` 선언을 사용하여 문서가 HTML 형식임을 알리면, 검사기를 통해 문서의 유효성을 검사하여 웹 표준을 준수할 수 있습니다.
4. 접근성: HTML은 웹 콘텐츠의 접근성을 높이기 위한 중요한 역할을 합니다. 웹 브라우저는 HTML 문서의 구조를 이해하고, 텍스트, 이미지, 링크 등의 요소를 적절하게 해석하여 보여줍니다. 올바른 HTML 형식을 사용하면 웹 접근성을 향상시킬 수 있으며, 보조 기기나 웹 사용자들에게 콘텐츠에 대한 적절한 정보를 제공할 수 있습니다.
따라서, `<!DOCTYPE html>` 선언을 사용하여 웹 브라우저에게 문서가 HTML 형식임을 알리는 것은 웹 페이지의 정확한 렌더링, 호환성, 유효성 검사, 접근성을 강화하기 위해 중요한 역할을 합니다.
2. `<html lang="en">`: `<html>` 요소는 HTML 문서의 루트 요소(root element)입니다. `lang` 속성은 문서의 언어를 지정하는 것으로, 여기서는 영어(`en`)로 지정되었습니다. 이는 웹 브라우저와 검색 엔진에게 문서의 언어를 알려주어 적절한 처리를 할 수 있도록 도와줍니다.
<html lang="en"> 의 "en" 대신 "kr"을 쓰면 어떻게 되는데?
`<html lang="en">`에서 "en"은 영어를 나타내는 ISO 639-1 언어 코드입니다. 이를 "kr"로 변경하면 한국어를 나타내는 것을 의미하게 됩니다. `<html lang="kr">`로 설정하면, 웹 브라우저와 검색 엔진에게 해당 문서가 한국어로 작성되었음을 알리는 역할을 합니다. 이는 웹 페이지의 다국어 지원과 검색 엔진 최적화에 도움을 줄 수 있습니다.
여기에는 몇 가지 장점이 있습니다:
1. 웹 브라우저 설정: 브라우저에서 기본 언어가 한국어로 설정된 경우, 웹 페이지가 `<html lang="kr">`로 설정되어 있으면 해당 언어에 맞는 폰트, 문자 인코딩 및 로컬라이징을 적용할 수 있습니다.
2. 접근성: `<html lang="kr">`로 설정하면 웹 접근성 측면에서 사용자에게 한국어로 된 콘텐츠를 제공하는 것이 중요합니다. 스크린 리더 사용자 및 다국어 지원을 필요로 하는 사용자들에게 웹 페이지의 언어를 명확히 알려줄 수 있습니다.
3. 검색 엔진 최적화 (SEO): 웹 페이지의 언어 설정은 검색 엔진이 해당 페이지를 인덱싱하고 검색 결과에서 적절하게 표시하는 데 도움을 줄 수 있습니다. 검색 엔진은 언어 설정을 통해 적합한 지역별 검색 결과를 제공할 수 있습니다. 따라서, `<html lang="kr">`을 사용하여 문서의 언어를 한국어로 설정하면, 사용자 경험과 접근성 개선, 검색 엔진 최적화 등 다양한 측면에서 이점을 얻을 수 있습니다.
3. `<head>`: `<head>` 요소는 문서의 메타데이터를 포함하는 부분입니다. 여기에는 문서의 제목, 문자 인코딩, 스타일 시트, 스크립트 등의 정보를 포함할 수 있습니다.
4. `<meta charset="UTF-8" />`: 이 부분은 문서의 문자 인코딩을 지정하는 것으로, UTF-8 인코딩을 사용한다는 것을 나타냅니다. UTF-8은 다양한 언어의 문자를 지원하며, 대부분의 경우 권장되는 문자 인코딩입니다.
5. `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`: 이 부분은 뷰포트(viewport) 설정을 지정하는 것으로, 모바일 장치에서의 화면 크기와 초기 확대/축소 비율을 조정합니다. `width=device-width`는 뷰포트의 너비를 장치의 실제 화면 너비로 설정하고, `initial-scale=1.0`은 페이지를 처음 로드할 때 확대/축소 비율을 1로 설정합니다.
6. `<title>Document</title>`: `<title>` 요소는 문서의 제목을 정의합니다. 이 부분은 웹 브라우저의 제목 표시줄이나 탭에 표시되는 제목을 설정합니다.
7. `<body></body>`: `<body>` 요소는 문서의 본문을 감싸는 부분으로, 실제 내용이 들어가는 곳입니다. 여기에는 텍스트, 이미지, 링크, 폼 등 웹 페이지의 내용이 포함됩니다.
위의 코드는 HTML 문서의 기본 구조를 갖추고 있으며, 이러한 요소들은 각각의 역할을 수행하여 문서의 유효성과 의미를 제공하고, 웹 브라우저와 검색 엔진이 문서를 올바르게 이해하고 처리할 수 있도록 돕습니다.
'frontend > HTML' 카테고리의 다른 글
| HTML5 144개의 태그 중 가장 많이 쓰이는 것 (0) | 2023.07.21 |
|---|---|
| flexbox 태그 (0) | 2023.07.21 |
| div 태그 - 일단 큰 덩어리를 나눠 놓을 것 (0) | 2023.07.20 |
| table 태그 기본 (0) | 2023.07.20 |
| 예약 캘린더 구축 : 테이블 태그 또는 캘린더 라이브러리 1 (0) | 2023.07.19 |
| 테이블과 스프레드시트 (0) | 2023.07.19 |
| HTML에 대해 초등학생/중학생/대학생에게 설명해줘 (0) | 2023.07.18 |
| HTML 기초 (생활코딩) (0) | 2023.07.13 |
