HTML5-구문

HTML 5 언어에는 웹에 게시 된 HTML 4 및 XHTML1 문서와 호환되는 "사용자 정의"HTML 구문이 있지만 HTML 4의보다 난해한 SGML 기능과는 호환되지 않습니다.

HTML 5에는 소문자 태그 이름이 필요하고 속성을 인용하고 속성에 값이 있어야하고 모든 빈 요소를 닫아야하는 XHTML과 동일한 구문 규칙이 없습니다.

HTML5는 많은 유연성을 제공하며 다음 기능을 지원합니다.

대문자 태그 이름.
따옴표는 속성에 대한 선택 사항입니다.
속성 값은 선택 사항입니다.
빈 요소를 닫는 것은 선택 사항입니다.

DOCTYPE

이전 버전의 HTML에서 DOCTYPE은 HTML 언어가 SGML 기반이므로 DTD에 대한 참조가 필요하기 때문에 더 길었습니다.

HTML 5 작성자는 다음과 같이 DOCTYPE을 지정하기 위해 간단한 구문을 사용합니다.

<!DOCTYPE html>

위의 구문은 대소 문자를 구분하지 않습니다.

문자 인코딩

HTML 5 작성자는 간단한 구문을 사용하여 다음과 같이 문자 인코딩을 지정할 수 있습니다.

<meta charset = "UTF-8">

위의 구문은 대소 문자를 구분하지 않습니다.

<script> 태그

다음과 같이 스크립트 요소에 "text / javascript"값이있는 유형 속성을 추가하는 것이 일반적입니다.

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5는 필요한 추가 정보를 제거하고 간단히 다음 구문을 사용할 수 있습니다.

<script src = "scriptfile.js"></script>

<link> 태그

지금까지 다음과 같이 <link>를 작성했습니다.

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5는 필요한 추가 정보를 제거하고 다음 구문을 사용하면됩니다.

<link rel = "stylesheet" href = "stylefile.css">

HTML5 요소

HTML5 요소는 시작 태그와 종료 태그를 사용하여 마크 업됩니다. 태그는 사이에 태그 이름과 함께 꺾쇠 괄호를 사용하여 구분됩니다.

시작 태그와 종료 태그의 차이점은 후자의 태그 이름 앞에 슬래시가 포함된다는 것입니다.

다음은 HTML5 요소의 예입니다.

<p>...</p>

HTML5 태그 이름은 대소 문자를 구분하지 않으며 모두 대문자 또는 대소 문자를 혼합하여 쓸 수 있지만 가장 일반적인 규칙은 소문자를 사용하는 것입니다.

대부분의 요소에는 <p> ... </ p>와 같은 일부 콘텐츠가 포함되어 있습니다. 그러나 일부 요소는 내용을 전혀 포함 할 수 없으며 이러한 요소를 void 요소라고합니다. 예를 들면br, hr, link, meta등

다음은 HTML5 요소 의 전체 목록입니다 .

HTML5 속성

요소에는 요소의 다양한 속성을 설정하는 데 사용되는 속성이 포함될 수 있습니다.

일부 속성은 전역 적으로 정의되어 모든 요소에서 사용할 수있는 반면 다른 속성은 특정 요소에 대해서만 정의됩니다. 모든 속성에는 이름과 값이 있으며 아래 예제에 표시된 것처럼 보입니다.

다음은 "example"값을 사용하여 class라는 속성으로 div 요소를 마크 업하는 방법을 보여주는 HTML5 속성의 예입니다.

<div class = "example">...</div>

속성은 시작 태그 내에서만 지정 될 수 있으며 종료 태그에서는 사용되지 않아야합니다.

HTML5 속성은 대소 문자를 구분하지 않으며 모두 대문자 또는 대소 문자 혼합으로 작성 될 수 있지만 가장 일반적인 규칙은 소문자를 사용하는 것입니다.

다음은 HTML5 속성 의 전체 목록입니다 .

HTML5 문서

더 나은 구조를 위해 다음 태그가 도입되었습니다.

section−이 태그는 일반 문서 또는 애플리케이션 섹션을 나타냅니다. 문서 구조를 나타 내기 위해 h1-h6과 함께 사용할 수 있습니다.
article −이 태그는 블로그 항목이나 신문 기사와 같은 문서의 독립적 인 콘텐츠를 나타냅니다.
aside −이 태그는 페이지의 나머지 부분과 약간 관련된 콘텐츠를 나타냅니다.
header −이 태그는 섹션의 헤더를 나타냅니다.
nav −이 태그는 탐색을위한 문서의 섹션을 나타냅니다.
dialog −이 태그는 대화를 마크 업하는 데 사용할 수 있습니다.
figure −이 태그는 그래픽 또는 비디오와 같은 일부 포함 된 콘텐츠와 함께 캡션을 연결하는 데 사용할 수 있습니다.

HTML 5 문서의 마크 업은 다음과 같습니다.

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

다음 결과가 생성됩니다-