방춘덕(고양이 키우면 지을 이름)의 개발 블로그입니다.
HTML5와 HTML4의 차이 본문
목차
- HTML5와 HTML4의 차이
- Semantic Markup
1. HTML5와 HTML4의 차이
HTML5는 4의 확장판과 같은 느낌이 강하기 때문에 격변한 것이 아닌 주로 무엇인가 추가, 수정, 삭제된 것이 많다. 자세한 내용은 여기를 참고하기 바란다.
그중 가장 눈에 띄고 쉽게 보이는 것이 바로 Semantic Element다. 이에 관해서는 아래에서 더 자세히 서술할 것이다.
Semantic elements = elements with a meaning.
(Semantic elements란 의미가 있는 element들을 말한다.)
아래는 HTML4로 작성된 html 파일이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4로 작성된 페이지</title>
</head>
<body>
<div id="header">
<h1>헤더의 내용이다.</h1>
</div>
<div id="menu">
<ul>
<li>뉴스</li>
<li>스포츠</li>
<li>날씨</li>
</ul>
</div>
<div id="content">
<h2>뉴스</h2>
<div class="article">
<h2>신종 코로나 바이러스..</h2>
<p>손 잘 씻고 다녀용</p>
</div>
<div class="article">
<h2>어쩌구 저쩌구..</h2>
<p>블라블라블라..</p>
</div>
</div>
<div id="footer">
<p>footer의 내용이다.</p>
</div>
</body>
</html>
이것을 HTML5로 마이그레이션 해보면 아래와 같이 변경된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML4로 작성된 페이지</title>
</head>
<body>
<header>
<h1>헤더의 내용이다.</h1>
</header>
<nav>
<ul>
<li>뉴스</li>
<li>스포츠</li>
<li>날씨</li>
</ul>
</nav>
<section>
<h2>뉴스</h2>
<article>
<h2>신종 코로나 바이러스..</h2>
<p>손 잘 씻고 다녀용</p>
</article>
<article>
<h2>어쩌구 저쩌구..</h2>
<p>블라블라블라..</p>
</article>
</section>
<footer>
<p>footer의 내용이다.</p>
</footer>
</body>
</html>HTML4 버전대에서 id를 통해 의미를 부여한 것과 비교해서 의미를 확실히 가지게 변경된 것을 볼 수 있다.
또한 video, audio 등 멀티미디어와 관련된 태그와 canvas, svg 등 웹에서 그래픽을 동적으로 표현할 수 있는 element 또한 새롭게 추가되었다.
이와 같은 내용을 주로 Content Model이라는 개념과 함께 소개하는데, Semantic Element들을 활용하는데 위의 코드로 설명하자면 아래 그림과 같다.
기존의 block 구조의 element와 Inline 구조의 element들로 페이지의 구조를 표현했다면 HTML5에서는 header, footer 등의 Semanctic element들로 이것을 해결하는 것이다. 지루하게 정의해보자면 작성하려는 페이지의 전체적인 윤곽을 semantic 하게 잡는 것을 말한다.
이 외에 LocalStorage, Web Worker 등의 새로운 API와 form element에 Number, Email 등의 새로운 attribute 또한 추가되었다. 하지만 양이 매우 많은 관계로 여기서 이만 줄이겠다.
2. Semantic Markup
위에서도 언급했듯이 Semantic element 덕분에 개발자들은 더 직관적으로 페이지의 구조를 파악할 수 있게 되었다. 또한 SEO(Search Engine Optimization)를 하려면, 크롤러 봇들에게 해당 페이지 내에서 어떤 element의 내용이 더 중요한지 알려줄 수 있다. (예를 들어 h1 태그는 p 태그보다 중요하다.) 이를 통해 검색엔진에 내가 원하는 방향으로 노출시킬 수 있다.
따라서 의미 없는 태그들 (div, span 등) 보다는 최대한 의미 있는 태그들(nav, footer, article 등)을 사용하여 웹의 접근성, 호환성을 향상해야 한다.
이 글을 작성할 때 읽은 감사한 자료들.
https://www.w3schools.com/html/html5_intro.asp
HTML5 Introduction
HTML5 Introduction What is New in HTML5? The DOCTYPE declaration for HTML5 is very simple: The character encoding (charset) declaration is also very simple: HTML5 Example:
https://www.w3.org/TR/html5-diff/
HTML5 Differences from HTML4
align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
www.w3.org
http://seekbrevity.com/semantic-markup-important-web-design/
Semantic HTML for Meaningful Webpages
Semantic markup is a way of writing and structuring your HTML so that it reinforces the semantics, or meaning, of the content rather than its appearance.
seekbrevity.com
https://www.w3schools.com/html/html5_semantic_elements.asp
HTML5 Semantic Elements
HTML5 Semantic Elements Semantics is the study of the meanings of words and phrases in a language. Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the develop
www.w3schools.com