2020 년에 업데이트 된 이 기사는 원래 Alexis Goldstein, Louis Lazaris 및 Estelle Weyl의 실제 세계를 위한 HTML5 및 CSS3의 장을 기반으로 합니다.
HTML5를 배우고 도구 상자에 새로운 기술을 추가하면 모든 HTML5 기반 프로젝트를 시작할 수 있는 상용구를 구축 할 수 있습니다.
이를 권장하며 기본적인 HTML5 시작점을 제공하는 많은 온라인 소스 중 하나를 사용할 수도 있습니다.
https://www.sitepoint.com/a-basic-html5-template/
이 기사에서는 이를 시작하는 방법을 살펴 보겠습니다. 간단한 HTML5 페이지로 간단하게 시작해 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>기본 템플릿을 사용하여 마크 업의 중요한 부분 중 일부와 HTML5 이전의 HTML 작성 방식과 다른 점을 살펴 보겠습니다.
HTML5 란 무엇입니까?
The Doctype
먼저 문서 유형 선언 또는 문서 유형이 있습니다. 브라우저 나 다른 파서에게 보고 있는 문서 유형을 알려주는 방법입니다.
HTML 파일의 경우 HTML의 특정 버전과 특징을 의미합니다. doctype은 항상 HTML 파일 맨 위에 있는 첫 번째 항목이어야 합니다. 몇 년 전, doctype 선언은 추악하고 기억하기 어려운 혼란이었습니다. XHTML 1.0 엄격한 경우 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML4 전환의 경우 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">문서 상단에 긴 텍스트 줄이 사이트를 보는 사람들에게 몇 바이트를 추가로 강요하는 것을 제외하고는 실제로 우리를 해치지 않았지만 HTML5는 그 눈에 띄지 않는 눈을 피했습니다. 이제 필요한 것은 이것입니다 :
<!doctype html>간단하고 요점. doctype은 대문자, 소문자 또는 대소 문자를 혼합하여 쓸 수 있습니다. 선언에서 "5"가 눈에 띄게 빠진 것을 알 수 있습니다. 웹 마크 업의 현재 반복은 "HTML5"로 알려져 있지만 실제로는 이전 HTML 표준의 진화 일 뿐입니다. 향후 사양은 오늘날 우리가 개발 한 것의 단순한 발전 일 것입니다.
브라우저는 일반적으로 웹에서 기존의 모든 컨텐츠를 지원해야 하므로 해당 문서에서 어떤 기능을 지원해야 하는지 문서 유형에 의존하지 않습니다. 다시 말해, doctype만으로는 페이지를 HTML5와 호환되지 않습니다. 이 작업을 수행하는 것은 브라우저에 달려 있습니다. 실제로, 페이지에 새로운 HTML5 요소와 함께 두 개의 이전 doctype 중 하나를 사용할 수 있으며 페이지는 새 doctype을 사용한 경우와 동일하게 렌더링 됩니다.
html 요소
HTML 문서의 다음은 html 요소이며 HTML5에서는 크게 바뀌지 않았습니다. 이 예에서는 문서가 영어로 지정되도록 en 값을 lang 속성에 포함 시켰습니다. XHTML 기반 구문에서는 xmlns 속성을 포함해야 합니다. HTML5에서는 더 이상 필요하지 않으며 문서의 유효성을 검사하거나 올바르게 작동하기 위해 lang 속성도 필요하지 않습니다.
닫는 </ html> 태그를 포함하여 지금까지 살펴본 내용은 다음과 같습니다.
<!doctype html>
<html lang="en">
</html>head 요소
우리 페이지의 다음 부분은 <head> 섹션입니다. 헤드 내부의 첫 번째 줄은 문서의 문자 인코딩을 정의하는 줄입니다.
이것은 XHTML 및 HTML4 이후 단순화 된 또 다른 요소이며 선택적 기능이지만 권장됩니다. 과거에는 다음과 같이 작성했을 수 있습니다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">HTML5는 문자 인코딩 <meta> 태그를 최소한으로 줄임으로써 이를 개선합니다.
<meta charset="utf-8">거의 모든 경우에 utf-8은 문서에서 사용할 가치입니다. 문자 인코딩에 대한 자세한 설명은 이 기사의 범위를 벗어 났으며 아마도 그다지 흥미롭지 않을 것입니다. 그럼에도 불구하고 조금 더 깊이 탐구하고 싶다면 W3C 또는 WHATWG의 주제를 읽으십시오.
참고 : 모든 브라우저에서 문자 인코딩을 올바르게 읽으려면 전체 문자 인코딩 선언이 문서의 처음 512 자 내에 포함되어야 합니다. 또한 콘텐츠 기반 요소 앞에 표시되어야 합니다 (예제 사이트에서 이 요소를 따르는 <title> 요소).
이 주제에 관해 더 많은 글을 쓸 수 있지만, 우리는 당신을 깨우고 싶습니다. 그래서 우리는 그 세부 사항을 아끼지 않을 것입니다! 지금은 이 간단한 선언을 받아들이고 문서의 다음 부분으로 넘어가겠습니다.
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">이 줄에서 HTML5는 이전 구문과 거의 다릅니다. 페이지 제목 (헤드 내부의 유일한 필수 요소)은 이전과 동일하게 선언되었으며, 포함 된 메타 태그는 위치가 표시되는 선택적 예일 뿐입니다. 여기에 원하는 만큼 유효한 메타 요소를 여기에 넣을 수 있습니다.
이 마크 업의 핵심 부분은 스타일 시트이며, 이는 일반적인 링크 요소를 사용하여 포함됩니다. href 및 rel 이외의 링크에는 필수 속성이 없습니다. type 속성 (이전 버전의 HTML에서 일반적 임)은 필요하지 않으며 스타일 시트의 컨텐츠 유형을 표시 할 필요도 없었습니다.
Leveling the Playing Field
HTML5가 소개되었을 때 기사 및 섹션과 같은 여러 가지 새로운 요소가 포함되었습니다. 인식 할 수 없는 요소에 대한 이전 브라우저 지원에서는 이것이 큰 문제라고 생각할 수 있지만 잘못되었습니다. 대부분의 브라우저는 실제로 어떤 태그를 사용하는지 신경 쓰지 않기 때문입니다. 레시피 태그 (또는 ziggy 태그)가 포함 된 HTML 문서가 있고 CSS가 해당 요소에 일부 스타일을 첨부하면 거의 모든 브라우저가 완전히 정상적인 것처럼 진행하여 불만 없이 스타일을 적용합니다.
물론 이러한 가상 문서는 유효성 검사에 실패하고 접근성 문제가 있을 수 있지만 거의 모든 브라우저에서 올바르게 렌더링 됩니다 (이전 버전의 Internet Explorer (IE) 제외). 버전 9 이전의 IE는 인식 할 수 없는 요소가 스타일을 수신하지 못하게 했습니다. 이러한 미스터리 요소는 렌더링 엔진에서 "알 수 없는 요소"로 보았으므로 모양이나 동작 방식을 변경할 수 없었습니다. 여기에는 우리가 상상 한 요소 뿐만 아니라 해당 브라우저 버전이 개발 될 때 아직 정의되지 않은 요소도 포함됩니다. 그것은 새로운 HTML5 요소를 의미합니다.
다행 인 것은 요즘 IE 사용이 줄어들었고 IE11은 전 세계 사용률 (2018 년 기준) 약 2.7 %로 떨어졌으며 그 이전 버전은 실제로 지도에서 삭제되었다는 것입니다. (Can i use 사이트에서 브라우저 사용 및 HTML5 기능 지원에 대한 통계를 볼 수 있습니다.)
고대 브라우저를 지원해야 한다면 John Resig가 처음 개발 한 매우 간단한 JavaScript 조각 인 신뢰할 수있는 HTML5 Shiv를 계속 사용할 수 있습니다. Sjoerd Visscher의 아이디어에서 영감을 받아 이전 버전의 IE에서 새로운 HTML5 요소의 스타일을 지정할 수 있었습니다. 하지만 실제로는 지금 필요하지 않습니다. Can i use에서 알 수 있듯이 HTML5 요소는 모든 최신 브라우저와 최신 버전에서도 지원됩니다. (모든 브라우저 버전을 보려면 "모두 표시"옵션을 클릭하십시오.) 한 가지 예외는 일부 브라우저가 최신 주요 요소를 인식하지 못한다는 것입니다. 그러나 해당 브라우저의 경우 적절한 스타일을 추가하는 경우 (예 : 블록 요소로 설정)이 요소를 계속 사용할 수 있습니다.
The Rest is History
시작 템플릿의 나머지 부분을 보면 닫는 태그 및 닫는 html 태그와 함께 일반적인 본문 요소가 있습니다. 또한 script 요소 안에 JavaScript 파일에 대한 참조가 있습니다.
앞에서 설명한 링크 태그와 마찬가지로 <script> 태그는 유형 속성을 선언하지 않아도 됩니다. XHTML을 작성한 경우 다음과 같은 스크립트 태그를 기억할 수 있습니다.
<script src="js/scripts.js" type="text/javascript"></script>JavaScript는 모든 실제적인 목적을 위해 웹에서 사용되는 유일한 실제 스크립팅 언어이므로 모든 브라우저는 해당 사실을 명시 적으로 선언하지 않은 경우에도 JavaScript를 사용한다고 가정하므로 HTML5 문서에서는 type 속성이 필요하지 않습니다. :
<script src="js/scripts.js"></script>JavaScript를 포함하는 모범 사례를 준수하기 위해 페이지 하단에 스크립트 요소를 배치했습니다. 이것은 페이지 로딩 속도와 관련이 있습니다. 브라우저가 스크립트를 만나면 스크립트를 구문 분석하는 동안 다운로드를 중단하고 나머지 페이지를 렌더링 합니다. 따라서 콘텐츠 전에 페이지 상단에 큰 스크립트가 포함되어 있으면 페이지가 훨씬 느리게 로드 됩니다. 그렇기 때문에 대부분의 스크립트는 페이지의 맨 아래에 배치해야 나머지 페이지가 로드 된 후에 만 파싱 됩니다.
그러나 HTML5 shiv와 같은 일부 경우에는 브라우저가 페이지 렌더링을 시작하기 전에 스크립트가 적용되기를 원하기 때문에 스크립트를 문서 헤드에 배치해야 할 수도 있습니다.
등록된 댓글이 없습니다.
