러시아어로 된 html5 사양. HTML5 코딩 표준. 빈 줄과 들여쓰기

웹 페이지나 웹 애플리케이션에 사용되는 HTML5 요소나 속성에 대한 설명을 빠르게 찾고 싶으십니까? 다음은 웹 디자이너와 웹 개발자가 15년 넘게 보관하려고 노력해온 고전적인 참고서입니다.
이 책의 제5판에는 HTML5 Candidate Recommendation, HTML5.1 Working Draft 및 WHATWG 표준에 따른 HTML5 요소 및 속성에 대한 완전한 설명이 포함되어 있습니다. 디렉토리의 특징:
– HTML5, HTML5.1 및 WHATWG 표준의 요소 및 속성을 알파벳순으로 정렬한 목록입니다.
– 각 요소에 대한 마크업, 콘텐츠 카테고리, 콘텐츠 모델 및 시작/끝 태그 요구 사항의 예
– HTML5와 HTML4.01 사양 간의 차이점에 대한 설명
– 특수 문자 테이블;
– HTML5에서 사용되는 API 라이브러리 개요.

숙련된 웹 사이트 개발자이거나 최신 표준에 따라 웹 사이트를 신속하게 구축하려는 경우 이 유용한 책이 반드시 필요하다는 것을 알게 될 것입니다.

기사나 책이 마음에 드셨나요? 친구들과 공유하세요:

간행물 제목인 "러시아어 HTML5 치트 시트"를 읽은 후 모두가 이미 연설에 대해 추측했지만 먼저 HTML5에 대한 일반적인 몇 단락을 살펴보았습니다.

2004년부터 HTML5 제작 작업이 시작되었습니다. 그리고 오늘날까지 계속됩니다. HTML5는 HTML(HyperText Markup Language)의 가장 보편적이고 기능적인 버전으로 계획되었습니다. 왜냐하면 Apple, Mozilla, Opera, Microsoft 및 Google과 같은 업계 거물들이 어떤 식으로든 HTML5 생성에 참여하고 있기 때문입니다. 정확히 알아두자면 구글 크롬, 에 이 순간, 가장 많은 HTML5 요소를 지원합니다.

HTML5에 대한 변경이 있을 수 있다는 사실에도 불구하고 HTML 5 사양에 대한 작업이 아직 진행 중이고 진행 중이기 때문에 기술 개발이 너무 빠르게 진행되어 HTML5가 곧 채택될 것이며 웹 사이트는 광범위한 기능을 사용하여 생성되어야 합니다. HTML5의!

러시아어로 된 HTML5 치트 시트는 학습에 도움이 됩니다.

코더와 레이아웃 디자이너는 오늘날 HTML5의 혁신, 태그 및 표준을 배워야 합니다. 왜냐하면 HTML5에 대한 지속적인 작업에도 불구하고 HTML5의 기능 중 일부는 이미 웹 사이트를 만들 때 꽤 성공적으로 사용되고 있기 때문입니다. 당연히 HTML5에 새로운 태그가 등장하고 일부 이전 태그는 지원되지 않기 때문에 태그를 사용하여 HTML5 학습을 시작해야 합니다. 또한 HTML4의 많은 태그가 HTML5로 왔습니다. 그리고 치트 시트보다 무언가를 배우는 데 더 좋고 더 편리한 것이 있을까요? 만나다:

RuNet의 첫 번째 러시아어 HTML5 치트 시트

RuNet의 첫 번째 러시아어 HTML5 치트 시트에는 이전에 널리 사용되었지만 스타일 이름으로 작성된 새로운 HTML5 요소가 포함되어 있습니다. 예를 들어 바닥글, 머리글, 섹션, 기사 등이 있습니다. 또한 러시아어로 된 HTML5 치트 시트에는 모든 태그가 포함되어 있습니다. 구 버전 HTML5로 이동한 HTML4입니다. 또한 러시아어로 된 HTML5 치트 시트에는 HTML5에서 지원하지 않는 태그가 포함되어 있습니다.

A4 형식으로 제작된 러시아어 HTML5 치트 시트

RuNet의 첫 번째 러시아어 HTML5 치트 시트는 A4 형식으로 제작되었으므로 인쇄하여 보관하는 것이 편리합니다. 러시아어로 된 HTML5 치트 시트는 모든 태그를 한 줄로 설명하여 태그의 목적을 최대한 전달합니다. 러시아어로 된 HTML5 치트 시트는 HTML5에 태그가 제거되거나 추가됨에 따라 지속적으로 개선되고 업데이트됩니다. 아래 링크에서 "HTML5 러시아어 치트 시트"를 다운로드할 수 있습니다. 아카이브에는 PDF 1개가 있습니다. 고품질그리고 두 jpg 파일다른 확장명으로.

“HTML5 Cheat Sheet in Russian” 다운로드(다운로드 수: 7996)

아카이브에는 확장자가 1024×1448 및 2480×3508인 두 개의 jpg 파일이 포함되어 있습니다.

2014년 10월 29일 업데이트

글이 작성되고 실제로 HTML 5로 치트시트가 생성된 지 2년 이상이 지났습니다. 그동안 치트시트가 3600번 다운로드 되었습니다.) 매우 기쁘고, 공부하시는 분들께 도움이 되었기를 바랍니다. HTML 5의 레이아웃. 저는 다양한 포럼과 웹사이트에서 많은 것을 배웠고, 치트 시트를 만들어 감사의 마음을 표하고 빚을 갚고 싶었습니다. 제가 오늘 이 글을 업데이트하는 이유는 오늘 HTML5의 개발이 마침내 완료되었기 때문입니다!

HTML5 개발이 공식적으로 완료되었습니다

HTML5는 공식적으로 "기능적으로 완전"합니다. W3C(Worldwide Web Consortium)가 확립한 글로벌 표준을 따릅니다. 아직 몇 가지 테스트가 남아 있고, 아직 공식적인 웹 표준이 되지는 않았지만 현재로서는 현재 버전에 비해 새로운 기능은 없을 것이라고 해도 무방합니다.

이는 이제 웹 디자이너와 앱 제작자가 원활한 전환을 위한 "안정적인 목표"를 갖게 되었음을 의미합니다. 새로운 표준 2015년까지. HTML5 마크업 언어를 사용하면 개발자는 이전에 독립형 애플리케이션이나 추가 애플리케이션이 필요했던 페이지에 기능을 추가할 수 있습니다. 소프트웨어, 자바와 같은 어도비 플래시또는 Microsoft(MSFT, Fortune 500) Silverlight. 그는 지지한다 스트리밍 비디오지리적 위치 서비스, 오프라인 도구 및 터치 컨트롤 등이 있습니다.

새로운 표준을 개발하는 데 10년 이상이 걸렸습니다. 최고 경영자 W3C Jeff Jaffe는 며칠 전 준비된 성명에서 현재 개발자들은 앞으로 몇 년 동안 HTML5에 의존할 수 있다는 것을 알고 있다고 말했습니다. “또한 개발자는 스마트폰, 자동차, TV, 전자책, 디지털 사인 및 장치는 아직 알려지지 않았습니다.”라고 덧붙였습니다.

최신 마이크로소프트 버전 인터넷 익스플로러, 구글 크롬, 모질라 파이어 폭스 Apple Safari는 이미 대부분의 HTML5 요소와 호환됩니다. W3C는 이미 HTML 5.1을 작업 중이며 그 첫 번째 부분이 초안으로 제출되었습니다.

규칙 HTML 코드

많은 웹 개발자의 경우 HTML 코드 사양을 잘 이해하지 못합니다.

2000~2010년에 많은 웹 개발자가 HTML에서 XHTML로 전환했습니다.

XHTML을 사용하는 개발자들은 점차적으로 좋은 HTML 작성 사양을 개발하고 있습니다.

그리고 HTML5에서는 비교적 좋은 코드 표준을 만들어야 하는데, 사양 아래에 몇 가지 지침이 나와 있습니다.

올바른 문서 유형을 사용하세요.

첫 번째 줄에 문서 유형 선언 HTML 문서:

문서 유형 HTML>

소문자와 같은 다른 레이블을 사용하려면 다음 코드를 사용할 수 있습니다.

문서 유형 HTML>

소문자 요소 이름

HTML5 요소 이름은 대문자 또는 소문자로 사용할 수 있습니다.

혼합 스타일의 경우는 매우 나쁩니다.
소문자는 쓰기 쉽습니다.

이것은 단락입니다.

아주 나쁜:

이것은 단락입니다.

모든 HTML 요소 끄기

HTML5에서는 모든 요소(예: 요소)를 닫고 싶지 않지만 모든 요소에 닫는 태그를 추가하는 것이 좋습니다.

이것은 단락입니다.

닫다 빈 요소 HTML

HTML5에서는 빈 HTML 요소를 끌 필요가 없습니다.

우리는 쓸 수있다:

다음과 같이 작성할 수도 있습니다.

XML, XHTML 및 슬래시(/)가 필요합니다.

XML 소프트웨어 페이지를 사용할 계획이라면 이 스타일이 매우 좋습니다.

소문자 속성 이름

HTML5를 사용하면 대문자와 소문자 모두로 속성 이름을 사용할 수 있습니다.

유스 케이스는 매우 나쁜 습관입니다.
개발자는 일반적으로 소문자(XHTML과 유사)를 사용합니다.
소문자 스타일이 더 산뜻해 보입니다.
소문자는 쓰기 쉽습니다.

자산 가치

HTML5 속성 값은 인용할 수 없습니다.

속성 값에 공백이 포함되어 있으면 따옴표를 사용해야 합니다.
혼합 스타일은 권장되지 않으며 단일 스타일이 제안됩니다.
따옴표를 사용한 속성 값은 읽기 쉽습니다.

다음 예제 속성 값에는 공백이 포함되어 있습니다. 따옴표를 사용하지 마십시오. 작동하지 않을 수 있습니다.

아래는 사용됩니다 큰따옴표, 이것이 맞습니다:

속성

Image Alt 속성이 자주 사용됩니다. 이미지를 표시할 수 없는 경우 이미지 표시를 대체할 수 있습니다.

= "HTML5" 스타일 = "너비: 128px; 높이: 128px">

이미지 크기가 결정되고 지정된 값을 로드할 때 예약될 수 있으며 깜박임을 줄일 수 있습니다.

= 스타일 "HTML5" = "너비: 128px; 높이: 128px">

공백 및 등호

등호 앞뒤에 공백을 사용할 수 있습니다.

긴 코드 줄 피하기

HTML 편집기를 사용하면 왼쪽 및 오른쪽 스크롤 코드가 어색합니다.

각 코드 줄은 가능한 한 80자 미만입니다.

빈 줄과 들여쓰기

아무 이유 없이 빈 줄을 추가하지 마세요.

각 기능 논리 블록에 대해 빈 줄을 추가하면 더 쉽게 읽을 수 있습니다.

단축 코드 사이에 불필요한 공백 들여쓰기 줄을 사용하지 마세요.

추가 빈 줄 및 들여쓰기:

이 튜토리얼

HTML

이 튜토리얼에서는 기술뿐만 아니라 수면에 대해서도 가르칩니다.
기술뿐만 아니라 꿈에서도 가르치는 이 교과서는
이 튜토리얼에서는 기술뿐만 아니라 수면에 대해서도 가르칩니다.

이 튜토리얼

이 튜토리얼에서는 기술뿐만 아니라 수면도 가르칩니다.
이 튜토리얼에서는 기술뿐만 아니라 수면에 대해서도 가르칩니다.
이 튜토리얼에서는 기술뿐만 아니라 수면에 대해서도 가르칩니다.
이 튜토리얼에서는 기술뿐만 아니라 수면에 대해서도 가르칩니다.

예시 양식:

이름
설명

ㅏ
설명 A

비
설명 B

예시 목록:

런던

파리

도쿄

생략하자 그리고?

HTML5 표준에서는 태그를 생략할 수 있습니다.

다음 문서는 유효한 HTML5입니다.

예:

문서 유형 HTML>

페이지 제목

제목은 이렇습니다

이것은 단락입니다.

시도 해봐 "

요소는 문서의 루트 요소로, 페이지를 설명하는 데 사용되는 언어입니다.

문서 유형 HTML>

화면과 검색 엔진에서 더 쉽게 읽을 수 있도록 하는 언어 설명입니다.

DOM 또는 XML 소프트웨어 충돌을 생략하겠습니다.

이전 브라우저(IE9)에서 발생하는 오류는 생략하겠습니다.

생략할까요?

HTML5 표준에서는 태그를 생략할 수 있습니다.

브라우저는 요소가 기본값에 추가되기 전의 내용을 기본값으로 설정합니다.

예

문서 유형 HTML>

페이지 제목

제목은 이렇습니다

이것은 단락입니다.

시도해 보세요 » 메타데이터

HTML5에는 제목 제목이 페이지의 주제를 설명하는 요소가 필요합니다.

이 튜토리얼에서는

검색 엔진이 페이지의 주제를 빠르게 이해할 수 있도록 하는 제목 및 언어:

문서 유형 HTML>

이 튜토리얼에서는

웹 디자이너 - HTML5 사양(HTML 5)

HTML5의 태그는 웹 페이지의 구조를 설명하는 XML-HTML 태그로, 컴퓨터 프로그램(검색 로봇 등)이 페이지의 주요 콘텐츠를 페이지의 나머지 부분(공식 및 탐색 요소)과 구별할 수 있도록 설계되었습니다. : 상단, 하단, 메뉴, 페이지 측면 요소, 반복(동적) 블록 등 주요 콘텐츠(페이지 텍스트) 수준에도 구분이 있습니다. HTML5 언어 자체는 HTML, XML, CSS 등에 대한 추가 기능입니다.

페이지 제목 웹페이지 상단, "헤더" 웹페이지 메인 메뉴 본문, 기사, 페이지 자료 사이드바(사이드바) 페이지 하단, 바닥글

웹사이트 구조

- 페이지(기사)의 주요 내용을 프레임으로 구성하고,
- 페이지 헤더의 프레임을 지정합니다.
- 페이지의 바닥글 프레임을 지정합니다.
- 중요한 것을 프레임에 담으세요 페이지 메뉴,
- 페이지의 사이드바(사이드바) 프레임을 지정합니다.
- 페이지의 프레임 반복 블록(예: 댓글)

HTML5 웹 페이지 템플릿 코드 요소.

- 인코딩 windows-1251을 할당합니다.

- IE에서 페이지를 열면 브라우저는 항상 최신 표준 디스플레이 모드를 사용해야 합니다.

- 모바일 장치에 사이트를 표시합니다.

헤더 - 사이트 페이지의 헤더로, 일반적으로 사이트 로고, 헤더, 전화번호, 슬라이더 등이 포함됩니다.

nav - 사이트 페이지의 기본 메뉴입니다.

기사 - 페이지의 주요 콘텐츠: 기사, 블로그 게시물, 포럼 주제 등 텍스트, 이미지, 비디오, 표 등이 포함될 수 있습니다.

Aside - 사이트의 사이드바(사이드바), 일반적으로 다음을 포함합니다. 다양한 요소예: 카테고리, 태그, 최신 게시물/댓글, 추가 메뉴, 카운터 등

바닥글 - 하단 부분 - 웹사이트 페이지의 바닥글, 일반적으로 다음을 포함합니다. 다양한 정보(저작권), 연락처 정보(주소, 전화번호) 등

페이지 구조 수준의 HTML5

페이지 구조 분할을 담당하는 새로운 HTML5 태그 목록을 살펴보겠습니다.

- 소위 "페이지 헤더"라고 불리는 사이트 상단의 디자인 요소를 구성하는 태그입니다. 또한 헤더 태그를 다음과 같이 사용할 수 있습니다. 윗부분섹션 태그.

- 사이트의 메인 메뉴를 구성하는 태그입니다.

- 페이지의 주요 콘텐츠를 구성하는 태그: 기사, 블로그 항목, 뉴스, 첫 번째 포럼 항목 등

- 사이드바를 구성하는 태그입니다. 사이드바는 소위 "사이드바"이며 일반적으로 제목 블록(카테고리), 태그 클라우드(태그), 목록 블록을 포함합니다. 최신 항목등등. 또한 프레임 카운터, 위젯(예: VKontakte의 댓글) 및 소셜 버튼에 태그를 따로 사용할 수도 있습니다.

- 프레이밍 태그 하단 부분사이트, 소위 "페이지 바닥글"에는 작성자 이름(회사), 연락처(주소, 전화번호), 법적 정보(저작권) 등이 포함될 수 있습니다. 바닥글 태그는 섹션 태그의 하단 부분으로도 사용할 수 있습니다. 바닥글 태그 자체는 섹션 태그 사이에 위치합니다.

- 페이지 또는 기본 콘텐츠의 반복되는 부분을 구성하는 태그입니다. 예를 들어 페이지에 스토리의 여러 장이 있는 경우 각 장은 이러한 태그 사이에 배치될 수 있습니다. 또는 사이드바에 있는 링크(예: 일부 카테고리의 링크)를 클릭하면 해당 카테고리에 속하는 기사로 연결되는 설명이 있는 링크가 있는 페이지가 나타나고 설명이 있는 링크를 프레임으로 구성할 수 있습니다. 섹션 태그, 온라인 상점의 설명이 있는 제품, 게시물에 대한 댓글, 포럼의 주제에 대한 댓글 등이 포함됩니다.

텍스트 수준의 HTML5

페이지 텍스트의 의미론적 분할을 담당하는 새로운 HTML5 태그 목록을 살펴보겠습니다.

- 이 태그 사이에 있는 텍스트는 "선택"됩니다. 마크 태그의 목적 중 하나는 예를 들어 사용자가 검색 줄에 입력한 단어와 일치하는 텍스트의 단어를 구성하는 것입니다.

- 태그는 날짜 및/또는 시간을 형식으로 생성하도록 설계되었습니다.
ISO 형식: YYYY-MM-DDThh:mm:ss 이 형식은 이해할 수 있습니다. 컴퓨터 프로그램. 시간 태그는 날짜 또는 텍스트의 프레임을 지정할 수 있습니다. 태그가 텍스트의 프레임을 지정하는 경우 날짜/시간 속성이 추가되며 해당 값은 ISO 형식의 날짜 및/또는 시간입니다.

- 태그는 숨겨져 있거나 표시되는 정보를 저장하도록 설계되었습니다(스포일러처럼 작동).

- 태그는 제목을 구성합니다. 클릭하면 세부정보 태그 사이에 텍스트가 나타납니다(스포일러로 사용할 수 있음).

추가 HTML5 언어 태그

언어를 풍부하게 해주는 새로운 HTML5 태그 목록:

- 태그는 측정 결과가 변경되지 않는 정적 눈금 표시기를 표시하도록 설계되었습니다. 작동하려면 최소값과 최대값이 필요합니다.

- 태그는 측정 결과가 실시간으로 변경되는 동적 스케일 표시기(예: 파일 다운로드 스케일)를 표시하도록 설계되었습니다.

- 태그는 JavaScript에서 스크립트를 생성할 때 사용되는 메뉴 태그 사이에 위치해야 합니다.

- 명령 태그는 이 태그 사이에 배치됩니다.

- 태그는 스크립트의 작업을 표시하기 위한 것입니다.

- 태그는 텍스트 필드에 입력할 때 표시되는 목록을 생성하기 위한 것입니다.

- 태그는 그림 태그 사이에 있는 개체(예: 이미지)에 대한 설명을 구성합니다.

- 태그는 설명이 있는 이미지, 설명이 있는 제품 등 고유한 설명을 사용하여 다양한 페이지 개체를 그룹화합니다.

- 태그는 h*라는 제목을 그룹화하도록 설계되었습니다.

- 태그는 공개/개인 키 쌍 생성, 데이터 암호화/복호화, 디지털 서명 생성/검증에 사용됩니다.

- 태그는 텍스트와 주석을 구성합니다.

- 태그는 루비 태그 사이에 위치하며 주석을 프레임화하기 위한 것입니다.

- 태그는 Ruby 태그를 지원하지 않는 브라우저용입니다.

- 태그는 브라우저에 단어(" 소프트 전송") 이 단어가 브라우저 창에 맞지 않는 경우.

새로운 기술을 설명하는 HTML5 태그

HTML5는 HTML5 언어의 일부인 많은 기술과 API를 사용할 수 있는 기능을 도입합니다. 타사 플러그인, 그중 일부는 다음과 같습니다.

- 태그는 오디오 파일을 재생하기 위한 것입니다. 타사 프로그램(플러그인, 확장).

- 태그는 타사 프로그램(플러그인, 확장 프로그램)을 사용하지 않고 비디오 파일을 재생하기 위한 것입니다.

- 태그는 audio 및 video 태그 내부에 있는 오디오/비디오 파일의 경로를 나타내기 위한 것입니다.

- 태그는 사이트에 벡터 모양을 만들고 JavaScript 프로그래밍 언어를 사용하여 조작할 수 있는 특수 영역을 만들기 위한 것입니다. 앞으로 Canvas는 Flash 기술을 대체해야 합니다(그렇습니다. 이론상으로는...).

꼬리표

태그는 벡터 모양을 그리고 조작하도록 설계된 특수 요소입니다. 태그는 Flash 기술을 대체하기 위해 만들어졌습니다. 태그를 사용하면 벡터 모양(이미지)을 그릴 수 있고, JavaScript를 사용하여 이러한 모양을 조작하여 사이트에 애니메이션(만화, 게임까지)을 만들 수 있습니다.

오디오 비디오

태그를 사용하면 페이지에 오디오 파일을 삽입하고 들을 수 있습니다. 요소

태그를 사용하면 페이지에 동영상 파일을 삽입하고 볼 수 있습니다. 또한 요소는 재생 버튼이 있는 패널을 생성합니다.

자바스크립트 API

HTML5 사양은 상호 작용하는 방법을 설명합니다. 자바스크립트 언어, DOM 기술을 통한 페이지 요소 포함. 또한 HTML5에는 객체를 조작하는 새로운 방법이 있습니다. 예를 들어 JavaScript를 사용하면 오디오/비디오 제어판의 버튼을 프로그래밍 방식으로 제어할 수 있습니다.

XML 기술 지원

HTML5 언어로 작성된 HTML 문서에서 이제 SVG나 MathML 등 다양한 XML 형식과 관련된 기술을 구현하는 것이 가능해졌습니다.

SVG

SVG - 확장 가능한 벡터 그래픽 벡터 그래픽)은 XML 형식입니다. HTML5가 XML 형식을 지원하기 시작했기 때문에 이제 SVG를 사용하여 만든 이미지를 HTML 문서에 삽입하고 JavaScript를 통해 조작하는 것이 가능해졌습니다.

녹색 원 패턴의 예제 코드:

결과:

MathML

MathML - Mathematical Markup Language(수학 마크업 언어) XML 형식입니다. 사용하여 이 형식의다양한 수학 공식을 기술할 수 있습니다.

HTML5의 어떤 태그가 더 이상 사용되지 않습니까?

HTML5 사양의 기존 태그는 다음과 같습니다.

대신 embed 태그를 사용해야 합니다.
대신 abbr 태그를 사용해야 합니다.
대신 사용해야합니다 오디오 태그
대신 ul 태그를 사용해야 합니다.
..대신 사용해야 합니다 iframe 태그
대신 여러 개의 양식 및 입력 태그를 사용해야 합니다.
대신 pre 또는 code 태그를 사용해야 합니다.

대신 pre 태그를 사용해야 합니다.
대신 s 태그를 사용해야 합니다

태그 형식 지정 대신: , , , , , , , , 및 , CSS 속성을 사용해야 합니다.

HTML5에서 웹사이트를 생성할 때 오래된 태그를 사용하는 것은 권장되지 않습니다. 그러나 이것이 브라우저가 더 이상 해당 태그를 지원하지 않는다는 의미는 아닙니다(예: 권장되지 않는 태그 작업). 밑줄을 긋다

HTML5의 새로운 전역 속성

전역 속성은 모든 HTML 문서 태그에 포함될 수 있는 속성입니다. 새로운 전역 속성이 HTML5에 나타났습니다. 아래 설명에서는 New라는 단어로 강조 표시되어 있습니다.

전역 HTML5 속성의 이름과 설명을 살펴보겠습니다.

accesskey=" " - 사전 프로그래밍된 키를 눌러 페이지의 모든 요소(태그)를 사용할 수 있습니다. 키 조합,
class=" " - 클래스 이름을 설정할 수 있습니다.
contenteditable=" " - 콘텐츠를 편집할 수 있습니다. 항목 새로운,
contextmenu=" " - 새 요소에 대한 상황에 맞는 메뉴를 만들 수 있습니다.
dir=" " - 관리할 수 있습니다. 텍스트 방향,
draggable=" " - 사용자가 New 요소를 드래그할 수 있습니다.
dropzone=" " - New를 드래그할 때 요소로 수행할 작업을 지정할 수 있습니다.
hiden=" " - 새 요소를 숨길 수 있습니다.
id=" " - 요소에 대한 고유 식별자를 설정할 수 있습니다.
lang=" " - 요소 콘텐츠에 언어 코드를 지정할 수 있습니다.
Spellcheck=" " - 새 요소의 콘텐츠에서 철자를 검사할지 여부를 지정할 수 있습니다.
style=" " - 요소에 대한 스타일을 생성할 수 있습니다.
tabindex=" " - Tab 키를 눌렀을 때 요소가 포커스를 받아야 하는 순서를 지정하는 규칙을 만들 수 있습니다.
title=" " - 요소 위로 마우스를 가져갈 때 나타나는 도구 설명을 만들 수 있습니다.

HTML5 사양에서는 태그가 본격적인 개체로 바뀌었기 때문에 사양에 아직 설명되지 않은 태그의 경우에도 전역 속성의 개념이 이미 이러한 개체에 내재되어 있습니다.

HTML5 문서 코드 구조의 혁신

HTML5의 코드 구조는 일부 변경되었습니다. 그 중 일부는 다음과 같습니다.

1. 달리 이전 버전언어에서는 HTML5에는 단 하나의 문서 유형만 있습니다.
예를 들어, 이 사이트 페이지의 소스 코드에서 이를 볼 수 있습니다(문서 유형 앞에는 공백이나 줄 바꿈 등이 없어야 함을 잊지 마십시오).

2. 문서 언어를 표시하려면 이제 메타 태그 대신 다음을 수행하십시오.
태그에 lang="ru" 속성을 사용해야 합니다.

3. 문서 인코딩을 나타내기 위해 이제 메타 태그 대신 다음을 수행합니다.

http-equiv 및 콘텐츠 속성 없이 메타 태그를 사용해야 합니다.

4. 이제 태그에서 JavaScript 스크립트를 생성할 때 type="text/javascript" 및 Language="JavaScript" 속성을 구현할 필요가 없습니다.

5. 구현 시 CSS 스타일, 이제 및 태그에 type="text/css" 속성을 구현할 필요가 없습니다.

6. 링크는 인라인 태그이므로 초기에는 HTML 사양및 XHTML에서는 블록 태그를 프레임하는 것이 권장되지 않았습니다. 이제 HTML5 사양에서는 링크에 대한 이 권장 사항이 제거되었으며 이제 하나 이상의 블록 요소를 프레임하는 것이 허용됩니다.

표제

절

이제 HTML5를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

표제

http://html-5.ru/, http://html-5.ru/uchebnik-html5 사이트의 자료를 기반으로 함

검색 엔진 로봇을 위한 명령 태그, 페이지의 의미론적 로드

2015년부터 2017년까지 HTML W3C에 추가된 사항

W3C 권고사항 1999년 12월 24일

웹 개발자는 특정 HTML 코딩 표준이 존재한다는 사실조차 인식하지 못하는 경우가 많습니다. 그러나 2000년에서 2010년 사이에 많은 웹 개발자가 HTML에서 XHTML로 전환했습니다. 동시에 XHTML은 개발자에게 유효하고 "잘 구성된" 코드를 작성하도록 강요했습니다. 코드 유효성 검사와 관련하여 HTML5는 약간의 엉성함을 허용합니다.

그러나 스타일이 일관되면 다른 사람들이 HTML 코드를 더 쉽게 이해할 수 있습니다.

아마도 언젠가는 독서 프로그램과 같은 프로그램도 있을 것입니다. XML 데이터, HTML 코드를 읽어야 합니다. 따라서 잘 구성된 XHTML과 유사한 구문을 사용하는 것이 합리적인 접근 방식입니다.

항상 코드가 깔끔하고 깨끗하며 형식이 올바른지 확인하세요.

올바른 문서 유형을 사용하세요.

항상 첫 번째 줄에 문서 유형을 선언하세요.

소문자 태그와의 일관성을 유지하려면 다음 문서 유형 정의를 사용할 수 있습니다.

요소 이름을 소문자로 작성

HTML5에서는 요소 이름에 대문자와 소문자를 모두 허용합니다. 그러나 항상 소문자만 사용하는 것이 좋습니다. 이는 다음 고려 사항으로 설명됩니다.

태그 이름에 대문자와 소문자를 혼합하는 것은 나쁜 습관으로 간주됩니다.

이것은 텍스트 단락입니다.

아주 나쁜:

이것은 텍스트 단락입니다.

모든 HTML 요소를 닫습니다.

HTML5에서는 모든 요소를 닫을 필요가 없습니다(예: 요소

이것은 텍스트 단락입니다.

빈 HTML 요소 닫기

HTML5에서는 빈 요소를 닫을지 여부는 웹 개발자의 희망에 따라 다릅니다.

허용:

또한 허용됩니다:

그러나 XHTML 및 XML에서는 후행 슬래시(/)가 필수입니다.

웹 페이지가 XML 애플리케이션에 의해 액세스될 것으로 예상되는 경우 빈 공간 HTML 요소닫는 슬래시를 사용하는 것이 더 좋습니다!

속성 이름에는 소문자를 사용하세요.

HTML5에서는 속성 이름을 작성할 때 대문자와 소문자를 혼합할 수 있습니다.

속성 이름에 대문자와 소문자를 혼합하는 것은 나쁜 습관으로 간주됩니다.
개발자는 일반적으로 XHTML과 같은 소문자를 사용합니다.
소문자 쓰기가 더 깔끔해 보입니다.
소문자로 작성하는 것이 더 쉽습니다.

속성 값을 따옴표로 묶습니다.

HTML5에서는 속성 값을 따옴표 없이 작성할 수 있습니다. 그러나 속성 값을 항상 따옴표로 묶는 것이 좋습니다.

의미에 대문자와 소문자를 혼합하는 것은 나쁜 습관으로 간주됩니다.
인용된 값은 읽기 더 쉽습니다.
값에 공백이 있으면 인용해야 합니다.

아주 나쁜:

값에 공백이 있기 때문에 작동하지 않습니다.

이미지 속성

이미지를 정의할 때 항상 "alt" 속성을 사용하세요. 이 속성은 어떤 이유로 이미지가 표시되지 않을 때 중요합니다.

또한 항상 이미지의 너비와 높이를 정의하십시오. 이렇게 하면 페이지가 로드되는 동안 브라우저가 이미지용 공간을 예약하므로 페이지 레이아웃 붕괴가 줄어듭니다.

공백과 같음

HTML5에서는 등호 주위에 공백을 허용합니다. 그러나 공백이 없으면 코드를 더 쉽게 읽을 수 있고 엔터티를 더 잘 그룹화할 수 있습니다.

긴 코드 줄 피하기

~에 HTML을 사용하여편집기에서는 창을 왼쪽이나 오른쪽으로 스크롤해야 하는 경우 HTML 코드를 읽는 것이 불편합니다.

코드 줄을 80자 이하로 유지해야 합니다.

빈 줄과 들여쓰기

정당한 이유 없이 빈 줄을 추가해서는 안 됩니다.

최고의 가독성을 위해서는 논리적으로 일관된 별도의 큰 코드 블록에만 빈 줄을 추가해야 합니다.

또한 가독성을 높이기 위해 들여쓰기를 위해 공백을 두 개 추가합니다. 이를 위해 탭을 사용하지 마십시오.

불필요한 공백과 들여쓰기를 피하세요. 각 요소를 들여쓰기할 필요는 없습니다.

필요하지 않음:

유명한 도시 도쿄

도쿄는 일본의 수도이자 수도권의 중심이자 세계에서 가장 인구가 많은 대도시입니다. 일본 정부와 황궁이 위치한 곳이자 일본 황실의 거주지입니다.

유명한 도시 도쿄

도쿄는 일본의 수도이자 수도권의 중심이자 세계에서 가장 인구가 많은 대도시입니다. 일본 정부와 황궁이 위치한 곳이자 일본 황실의 거주지입니다.

이름 설명

ㅏ	A에 대한 설명
비	B에 대한 설명

런던

파리

도쿄

건너뛸까 말까?

HTML5 표준에 따라 태그와 태그를 사용할 수 없습니다.

다음 코드는 HTML5 표준에 따라 유효한 것으로 간주됩니다.

페이지 제목 텍스트 제목입니다.

이것은 텍스트 단락입니다.

요소는 문서의 루트입니다. 페이지 언어를 정의하는 데 권장되는 위치는 다음과 같습니다.

페이지 언어 선언은 특수 애플리케이션(예: 화면 판독기)과 검색 엔진 모두에 중요합니다.

또한, 태그나 태그를 작성하지 않으면 애플리케이션의 DOM 및 XML 구조가 깨질 수 있습니다. 또한 태그를 건너뛰면 이전 브라우저(IE9)에서 오류가 발생할 수도 있습니다.

태그를 건너뛰어야 하나요?

HTML5 표준에 따라 태그를 사용할 수 없습니다.

기본적으로 브라우저는 자신이 만든 요소 내에서 여는 태그 앞에 모든 요소를 추가합니다.

태그를 생략하면 HTML 구조의 복잡성을 줄일 수 있습니다.

페이지 제목 텍스트 제목

이것은 텍스트 단락입니다.

메타데이터

이 요소는 HTML5에 필요합니다. 페이지 제목은 다음과 같은 의미로 채워져야 합니다.

페이지의 올바른 해석과 올바른 색인 생성을 보장하기 위해 검색 엔진, 페이지의 언어 및 문자 인코딩 정의는 가능한 한 빨리 선언되어야 합니다.

HTML5 구문 및 코딩 표준

뷰포트 설치(투시창)

"뷰포트"는 웹페이지에서 사용자가 볼 수 있는 영역입니다. 이 영역은 장치마다 다르며 장치마다 다릅니다. 휴대 전화컴퓨터 화면보다 작습니다.

HTML5에서는 웹 디자이너가 .

모든 웹 페이지에서는 항상 다음 형식의 뷰포트 컨트롤을 사용해야 합니다.

이 뷰포트 컨트롤은 페이지의 크기와 배율을 제어하는 방법에 대한 지침을 브라우저에 제공합니다.

width=device-width 부분은 현재 장치의 화면 너비와 일치하도록 페이지 너비를 설정합니다(사용 중인 장치에 따라 다름).

초기 규모=1.0 부품 세트 첫 번째 수준브라우저가 페이지를 처음 로드할 때 증가합니다.

아래에서는 뷰포트 메타 태그가 설치된 것과 설치되지 않은 스마트폰 화면의 웹 페이지 예를 볼 수 있습니다.

뷰포트 메타 태그가 있는 페이지

HTML 주석

짧은 설명은 한 줄에 작성해야 합니다.