| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 사이드프로젝트
- 케네스로그
- 자바 스터디
- 2+2
- 미국유학생
- 개인 프로젝트 개발일지
- java
- JVM아키텍처
- 자바
- i-20
- F1학생비자
- 만다라트프로젝트
- 미국대학
- 유학생 준비물
- CSUS
- Kenneth Park
- 미국유학
- 부산외대
- 복수학위제도
- 개발일지
- 해외유학
- Java 스터디
- 미국유학생활
- 비전공자 git
- jpa
- 미국대학생활
- California State University Sacramento
- 케네스
- 파이데이아창의인재학과
- 유학생대학생활
- Today
- Total
케네스로그
HTML 문서 구조화, 시멘틱 마크업이 필요한 이유 본문
HTML 문서의 구조화와 시멘틱 마크업에 대하여
처음 웹 개발을 공부하면서 웹 문서를 구조화하고 시멘틱 마크업을 적절히 반영하는 것의 중요성을 피부로 와닿지 못했습니다. 학부시절에 시멘틱 마크업이 중요하다고 이야기는 들었지만, 정작 왜 중요한지, 어떻게 그것을 달성할 수 있는지는 배우지 못해 아쉬움이 많았습니다. 이번에 이쪽을 공부하게 되면서 깨달은 점이, 최근의 대부분 웹 문서들이 이미 구조화와 시멘틱 마크업 작업이 잘 되어있기때문에 그 필요성을 느끼지 못하는듯 했습니다.
좀 더 와닿는 이해를 위해 구조화와 시멘틱 마크업이 잘 못된 예를 만들어 보았습니다.
잘못된 웹 문서 구조화!
잘못된 웹 문서 구조화의 예시를 위해 웹사이트 예시를 만들었습니다.
포켓몬 '꼬지모'에 대한 설명과 사진, 다른 메뉴로 이동할 수 있는 네비게이션을 만들었습니다.🤣
뭔가 불편한 이유?
위의 예시 사이트를 보면, 뭔가 답답하고 불편한 느낌이 듭니다. 🤔
그 이유는 익숙하지 않은 구조 때문입니다.
세상에는 정말 많은 웹 사이트가 존재하지만 서로 비슷한 모양을 가집니다. 네이버와 다음, 다른 사이트임에도 우리는 친숙하게 원하는 서비스를 찾아갑니다. 이는 각 웹 사이트들이 공통적으로 따르는 구조가 있기 때문입니다.
이런 구조의 공통적 요소는 다른 페이지로 이동할 수 있는 링크를 보여주는 메뉴, 회원의 정보를 나타내는 프로필, 저작권이나 제작자의 정보를 알려주는 바닥글(footer), 해당 페이지의 제목을 나타내는 머릿글(header), 본 내용을 나타내는 바디 등으로 나누어질 수 있습니다.
정상적인 구조의 웹 문서
위의 잘못된 구조의 웹 문서를 전형적인 구조의 웹 문서로 재생성했습니다.
같은 요소들을 가지고 있지만, 사용자 입장에서 훨씬 편안함을 느낄 수 있습니다.
간단하게 표기하면 다음과 같이 구조를 볼 수 있습니다.
시멘틱 마크업을 적용하지 않은 코드
시멘틱 마크업을 적용했는지 여부는 화면 상으로 확인할 수 없기때문에 코드를 봐야합니다. HTML,CSS를 아는 사람이라면 어느정도 차이를 이해할 수 있을겁니다. 이번에는 위 사이트에 시멘틱 마크업을 적용하지 않은 코드와 적용된 코드를 올려봅니다.
<html>
<body>
<b>꼬지모 팬클럽</b>
<ul>
<li>Home</li>
<li>Board</li>
<li>QnA</li>
<li>ETC</li>
</ul>
<div>
<span>소개</span>
<p>꼬지모 이야기</p>
</div>
<div>
<img href="꼬지모사진.jpg">
</div>
<div>
<a href="other">other..</a>
</div>
</body>
</html>간단한 HTML 코드이지만, 각 HTML 요소들의 역할을 가늠하기 어렵습니다. 웹 문서의 규모가 커질수록 개발자 입장에서 코드를 이해하는게 더욱 어려워지겠죠.
<html>
<body>
<header>꼬지모 팬클럽</header>
<nav>
<ul>
<li>Home</li>
<li>Board</li>
<li>QnA</li>
<li>ETC</li>
</ul>
</nav>
<main>
<article>
<section>
<h1>소개</h1>
<div>꼬지모 이야기</div>
</section>
</article>
<article>
<img src="꼬지모사진.jpg">
</article>
<aside>
<a href="other">other..</a>
</aside>
</main>
</body>
</html>제 나름대로 시멘틱 마크업을 고려하여 수정한 HTML 코드입니다. 앞서 코드에 비해, HTML 요소의 이름을 통해서 해당 코드의 역할을 가늠할 수 있습니다.
두 예제의 코드 모두 똑같은 동작을 하지만, 그럼에도 불구하고, 시멘틱 마크업을 고려해서 HTML 문서를 작성해야하는 이유가 있습니다.
반드시 시멘틱 마크업, 구조화를 해야 하는 이유
1. 검색엔진 최적화(Search Engine Optimization)
사람보다 컴퓨터가 인터넷 사이트를 더 많이 열람합니다. 구글과 같은 검색엔진은 모든 사이트를 돌아다니며 해당 웹 사이트를 파악하고 인덱싱하여 검색결과에 노출될 수 있도록 하고 있습니다. 이 검색엔진이라는 컴퓨터가 웹 문서를 파악하고 컨텐츠의 의미를 이해하는데에 꼭 필요한 것이 문서 구조화와 시멘틱 마크업입니다.
2. 보조 기술 지원
위의 이유와 비슷하지만, 장애인을 위한 보조 기술 또는 스크린리더와 같은 기능을 위해서는 문서의 구조화와 시멘틱 마크업은 필수요소이다. 검색엔진이 웹사이트를 파악하는 것과 마찬가지로 이러한 기능들도 웹 문서를 파악하기 위해 구조화와 시멘틱 마크업을 요구한다.
3. Better UX
사람들은 전통적인 웹사이트 구조에 익숙해있습니다. 대부분의 웹 사이트들이 비슷한 구조를 가지듯, 사람들은 무의식적으로 메뉴의 위치나 헤더, 메인 컨텐츠의 위치를 알고 찾아갑니다. 메뉴가 최하단에 위치한다면 사람들은 어색한 메뉴의 위치에 불편함을 겪게 될 것이고, 제목과 본문의 구분이 되지 못해서 글을 읽는데에 큰 불편이 있겠죠. 즉, 기본적인 문서 구조를 따르는 것이 사람들에게 편리함을 제공하는 길이라고 할 수 있습니다.
4. 웹 개발
구조화가 잘 되어 있다면, CSS를 이용해 스타일링을 하거나 JavaScript를 통해 프로그래밍하는데에도 큰 도움이 된다.
정리하며
MDN에서 "... respect semantics and use the right element for the right job."고 이야기 합니다. 의역 하자면, HTML 요소의 의미를 고려하고, 특정 작업을 위한 적절한 요소를 사용해라는 겁니다. 그저 이쁘게 웹 사이트를 꾸미고 좋은 자료를 올리는 것이 능사는 아닌겁니다. 좋은 웹 사이트를 위해서는 HTML 요소를 의미에 적합하게 사용하여 문서를 구조화 하는 것이 중요합니다.
Document and website structure - Learn web development | MDN
At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.
developer.mozilla.org
다음 포스트에서는 문서의 기본 구조를 이루는 각 영역들과 해당 영역에서 사용되는 요소들에 대해 이야기하겠습니다.
'Dev > WEB' 카테고리의 다른 글
| [WEB] TCP/UDP (0) | 2023.01.03 |
|---|---|
| [WEB] HTTP (0) | 2023.01.03 |
| HTML 컨텐츠 카테고리와 모델의 이해 (0) | 2021.08.16 |
| HTML <form> 태그 정리 (input태그 예제) (0) | 2021.08.11 |
| HTML 테이블 셀 병합 (colspan, rowspan) (0) | 2021.04.27 |
