1990년대 후반에서 2000년대 초반 즈음에 한국에 인터넷이 보급되기 시작하면서 개인 홈페이지 열풍이 불었을 때 홈페이지의 HTML 코딩을 다음과 같이 했을 것입니다.
<html> <head> <title>제목</title> </head> <body background="배경그림" bgcolor="배경색" text="글자색" link="링크색" vlink="방문링크색" alink="활성링크색"> <p><font size="5" color="글자색">Hello, world!</font></p> <p>Hello, world!</p> </body> </html>
그 당시는 컴퓨터로만 인터넷을 하던 시대였지만, 스마트폰으로 인터넷을 하는 시대가 오면서 오늘날 이런 형식의 홈페이지 코딩은 권장되지 않는 형식입니다. 웹 표준화 기구인 W3C에서 HTML 문서에는 문서로써의 의미를 강하게 부여하고 외형적인 부분은 CSS에 맡기는 시맨틱 웹(Semantic Web)의 개념을 정립함에 따라 여기서 예로 든 <font> ... </font> 등 순전히 외형을 꾸미는 기능 이상의 의미가 없는 태그의 사용을 지양하였고 이에 따라 시맨틱 웹에 최적화된 오늘날의 HTML5 규격이 제정되었습니다.
HTML5에서는 여러 태그들을 추가하여 기존의 HTML 4.01보다 더 많은 기능을 구현할 수 있게 되었고 필요성이 떨어진 몇몇 태그의 지원이 중단되었다는 특징이 있습니다.
새로워진 태그들
- 시맨틱 태그:
header,footer,main,section,article,aside - 멀티미디어 태그:
audio,video,picture,canvas,svg등 - 그 외:
detail,summary,figure,figcaption등 em이나hr등은 기존의 시각적인 기능 외에도 의미적인 기능이 추가되었습니다.
또한, 표준 태그였던 다음 태그들이 표준에서 제외되었습니다: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt. 이 태그들은 다른 태그와 의미가 중복되거나 단순히 시각적인 기능만 존재하여 CSS로 충분히 대체할 수 있어 HTML5에서 삭제되었습니다.
그렇다면, HTML5 규격에 맞게 다시 코딩한 예시를 보겠습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="stylesheet" href="CSS 파일 주소" type="text/css" media="all" /> <script type="text/javascript" src="스크립트 파일 주소"></script> <title>제목</title> </head> <body> <header> <h1>사이트 제목</h1> <h2>사이트 부제목</h2> <nav> <ul> <li>메뉴</li> <li>메뉴</li> <li>메뉴</li> </ul> </nav> </header> <main> <section> <h2>Hello, world!</h2> <article> <h3>Hello, world!</h3> <section> <h4>Hello, world!</h4> <p>Blah Blah</p> </section> <section> <h4>Goodbye!</h4> <p>Blah Blah</p> </section> </article> </section> </main> <aside> 사이드바 </aside> <footer> <address>주소</address> </footer> </body> </html>
일단 1번 줄과 같이 맨 처음에 DOCTYPE 태그 지정은 필수입니다. 다만, <!DOCTYPE html> 이렇게 적기만 해도 HTML5 문서임을 명시할 수 있습니다.
또한, HEAD 부분에는 메타 태그들과 CSS 링크, 자바스크립트 파일 등이 들어갑니다. 메타 태그에는 인코딩 종류, 화면 크기 등을 지정할 수 있는데 오늘날에는 UTF-8이 보편적입니다.
body 태그에는 배경색과 글자색, 링크색 등을 지정하지 않습니다. CSS로 대체 가능하기 때문입니다.
기존의 div 태그 중첩 대신 레이아웃용 태그를 사용합니다. header 태그에는 머릿글, nav 태그에는 둘러보기, main 태그에는 중심글, aside 태그에는 사이드바, footer 태그에는 바닥글이 들어갑니다. main 태그는 한 페이지에 하나만 쓸 수 있으며 안에는 section 태그와 article 태그를 씁니다. section 태그는 문서 내용을 나눌 때, article 태그는 본문을 지정할 때 씁니다.
이런 식으로 만드는 것이 HTML5의 코딩 형식입니다. 물론 이렇게 만들기만 하면 모양이 잡히지 않기 때문에, CSS 파일을 만들어 모양을 잡는 것이 중요합니다.
“HTML5 시대에 맞게 홈페이지 코딩하기”의 1개의 생각