티스토리 뷰
Web - 시맨틱 웹 낱낱이 파헤치기 + React.Fragment에 쓰인 시맨틱 개념
Ideveloper2 2018. 12. 22. 23:01Web
:시맨틱 웹 낱낱이 파헤치기 + React.Fragment 에 쓰인 시맨틱 개념
| 시작하기에 앞서
팀 버너스리, 차세대 웹 - TED 강연 (웹에서의 데이터)
https://www.ted.com/talks/tim_berners_lee_on_the_next_web?language=ko#t-397419 (7분 40초 ~9분 40초)
| Semantic web? Semantic Tag?
> Definition
시맨틱 웹은 직역하면 의미론적인 웹 입니다. 즉, 문서의 이미에 맞게 어플리케이션의 의미에 맞게 구성 된 웹입니다.
- 컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹.
- 또한 다른 의미로는 정보를 분석하여 그 정보의 관계 속에서 의미론적인 자료들을 추출하여 웹상에 보여줄수 있는 웹
예를 들어, 강남역 스터디룸 이라는 키워드 속에서 의미적 데이터를 추출하여, 그 검색엔진 속에서 강남역 근처의 스터디룸을 보여주고, 또 그 뿐 아니라 그 스터디룸의 가격 그리고 위치 정보 까지 보여줄 수 있는 것도 시맨틱 웹으로 구성되어 있기 때문에 보여줄수 있는 정보인 셈인 것입니다.
> HTML5에 녹아든 시맨틱 태그
HTML5로 넘어오면서 태그의 가장 큰 변화는 시멘틱 태그라고도 말하기도 합니다.
- [표] html5에 새롭게 추가 된 시맨틱 구조태그 예시
태그 이름 |
설명 |
header |
헤더를 의미 |
nav |
내비게이션을 의미 |
aside |
사이드에 위치하는 공간을 의미 |
section |
여러 중심 내용을 감싸는 공간을 의미 |
article |
글자가 많이 들어가는 부분을 의미 |
footer |
푸터를 의미 |
| Differences between semantic web and semantic tag
| Examples of semantic Tag
프론트엔드 개발자에게 있어서 마크업 구조를 시맨틱 하게 짜는 것은 매우 중요한 요소입니다.
물론, 디자인시안 처럼 똑같이 마크업을 짜는 것도 무척 중요합니다. 하지만, 우리는 웹을 그저 시각적 형태로만 볼것이 아니라, 데이터들을 보여주는 것이므로 이러한 마크업을 짤때, 시맨틱 웹 개념을 생각하며 의미론적으로 마크업 구조를 짜야 하고 태그들을 적절한 상황에 맞게 사용해야 합니다.
> 예제 1 ( p 태그와 div 태그 )
아래와 같은 div 태그와 paragraph를 나타내는 p 태그 중에 어떤 태그가 더 의미 가 전달 되나요??
<div>
프론트엔드 병아리 개발자 이승규입니다.
</div>
<p>
프론트엔드 병아리 개발자 이승규입니다.
</p>기계는 우리가 입력한 데이터를 전달 받기 때문에 명확한 의미를 전달해 줄 필요가 있습니다. 의미에 따라 검색엔진 로봇은 요소를 이해하고, 이러한 것을 바탕으로 콘텐츠를 보여주고 브라우저는 이러한 의미에 따라 스타일을 다르게 보여주기도 합니다.
https://www.w3.org/wiki/Html/Elements/div 옆의 w3c의 웹 표준 위키 링크를 들어가면 도저히, 선택할 태그가 없으면 최후의 보루로 div 태그를 사용하라고 나와 있습니다. 그리고, 접근성도 좋지 않다고 명시해 놓았습니다.
이렇게 w3c에서도 최후의 보루로 명시해 놓은 div 태그를 남발하고 계시지는 않으신가요? ㅎㅎ
> 예제 2 ( html5 이후 등장한 시맨틱 태그들 )
- html5 이전
<body>
<div>
<h1>헤더</h1>
</div>
<div>
<div>
<h1>제목1</h1>
<p>내용1</p>
</div>
<div>
<h1>제목2</h1>
<p>내용2</p>
</div>
</div>
<div>
<span>주소</span>
</div>
</body>- html5 이후
<body>
<header>
<h1>헤더</h1>
</header>
<nav>
<ul>
<li><a href="#">Menu -1 </a></li>
<li><a href="#">Menu -2 </a></li>
<li><a href="#">Menu -3 </a></li>
</ul>
</nav>
<section>
<article>
<h1>제목1</h1>
<p>내용1</h1>
</article>
<article>
<h1>제목2</h1>
<p>내용2</p>
</article>
</section>
<footer>
<address>주소</address>
</footer>
</body>| HTML5 Contents Model
> Best practice of html5 semantic markup 슬라이드를 참고하여, 그 내용을 캡쳐하였습니다.
https://www.slideshare.net/headvoy/best-practice-of-html5-semantic-markup (꼭 한번 들어가서 읽어보시길 추천드립니다!)
1. 메타데이터
2. Sectioning (구역)
3. 머리말
heading tag는 seo관점에서 정말 중요하다고 하는데요, 이와 관련해서는 https://ideveloper2.tistory.com/161 (본인이 쓴 머리말 태그 관련 포스팅 글) 에 자세히 그내용과 관련하여 포스팅했습니다.
4. 임베디드
5. 인터렉티브
| Why you have to know about semantic web
> 시맨틱 마크업의 장점
- 개발자가 의도한 요소의 의미가 명확히 드러나고, 이것은 코드의 가독성을 높이기도 하며 유지보수를 쉽게합니다.
- 시맨틱 요소로 구성되어있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고, 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링, 인덱싱이 가능해졌습니다.
- html5 outliner 크롬 확장 tool
- html문서의 아웃라인을 시맨틱 태그를 활용하여 잘 구조를 짰는지 파악할수있음.
| Semantic in React
> React.Fragment에 녹아든 시맨틱 웹
Q) jsx에서는 div 태그로 항상 감싸야 하는걸 막기 위해 React.fragment가 있는데 이것도 이러한 불필요한 div를 막는 시맨틱 웹의 관점에서 접근했을까?
리액트 공식 사이트에서 시맨틱한 웹 접근성을 위해 fragment를 구현했다고 예시로 소개함
Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information in our websites will often give us accessibility for free.
Sometimes we break HTML semantics when we add <div> elements to our JSX to make our React code work, especially when working with lists (<ol>, <ul> and <dl>) and the HTML <table>. In these cases we should rather use React Fragments to group together multiple elements.
관련 참고링크: http://blog.jmes.tech/react-fragment-and-semantic-html/
| 결론
- 더나은 프론트개발자가 되기 위해선, 컨텐츠가 어떻게 표현되는지에 집중하는 것 뿐만 아니라, 웹에서 보여주고 있는 내용에 맞는 적절한 태그로 HTML 을 작성해야 합니다.
- React, Typescript, 서버사이드 렌더링을 적용 하기 위해 Next.js 등등 최신 기술의 흐름을 쫓는 것도 중요하지만, 위와 같은 기본과 웹을 구성하는 데에 기반이 되는 시맨틱 웹에 대한 이해는 꼭 필요하고, 위와 같이 중요한 것들을 간과하면 안된다는 생각이 들었습니다.
- 웹은 시각적인 정보 표현 그 이상입니다. 또한 이러한 웹의 데이터들로 구성된 웹 생태계에서는 시멘틱하게 웹을 설계하고 구성하는것이 매우 중요할것 같습니다.
| References
- http://snusang.tistory.com/4
- https://poiemaweb.com/html5-semantic-web
- https://www.slideshare.net/NULINTS/2014-html5
'Computer Engineering > Web' 카테고리의 다른 글
| Web - Heading Tag (제목 태그) 와 검색엔진 최적화의 연관성 (0) | 2018.12.16 |
|---|---|
| Web - iframe 사용시 하단에 발생하는 공백 제거방법 (0) | 2018.09.17 |
| Web - haml이란? (0) | 2018.08.18 |
| WEB -DOM APIs (0) | 2018.07.05 |
| Web -DOM과 querySelector (0) | 2018.07.03 |