이번 포스팅에서는, 사용자에게 보여지는 부분을 구성할 때 사용하는 Tag들에 대해 알아보겠습니다. 즉 <Body> 태그의 자식으로 들어가는 Tag들에 관련된 포스팅입니다.
1. Semantic VS non-Semantic
Semantic Element
Semantic Element를 만드는 Tag에는 아래와 같은 것들이 있다.
div 태그만을 이용해서 Sectioning(Layout)이 가능한데, 왜 다른 Semantic Tag를 사용하여 Layout 작업을 해야 되는가?
- Semantic Element란 Semantic Tag로 구성된 요소를 말한다. Semantic Tag는 웹 페이지의 구조를 쉽게 이해할 수 있게 만들어 준다. 그뿐만 아니라, 검색엔진 봇이 웹 페이지를 이해하는데도 도움을 준다.
검색 엔진은 봇을 사용하여 전세계의 웹 페이지들을 크롤링을 한다. 크롤링 봇은 HTML 코드를 읽어서 웹 페이지를 파악한다. 이때 Semantic Element에 담긴 것을 중요한 텍스트로 파악해둔다.검색엔진은 "사용자의 검색어"와 "Semantic Element에 의해 중요하다고 파악된 정보"가 가장 잘 매칭된 페이지를 먼저 보여주게 된다. 따라서 Semantic Element를 이용해 검색엔진 최적화를 달성할 수 있다.
따라서, 웹사이트를 div 태그만을 이용하여 배치하지 말고 Semantic 태그를 이용하여 레이아웃을 만들자. main 섹션도 디자인에 따라 section과 article 태그로 분리가 가능하다.
Semantic Web??
모든 웹 페이지가 시맨틱 태그에 의해 메타데이터가 부여된다면, 웹 세상은 잡다한 HTML의 집합이 아니라, 모든 페이지가 "의미"와 "관련"을 가지는 거대한 데이터베이스가 될 수 있다. 이것이 시맨틱 웹이다.
non-Semantic
non-Semantic Element를 만드는 Tag에는 div와 span 등이 존재한다. 이 Tag들은 Content에 대한 어떠한 의미도 부여하지 않는다.
non-Semantic 또한 그 쓰임이 있다. 여러 개의 문단으로 이뤄진 글이 있다고 생각해보자. 이 때, 한 문단만 다른 스타일을 적용하려면 non-Semantic Tag를 사용하면 된다. 오직 스타일만을 위해 분리하는 것이라면 어떠한 의미론적인 중요도가 없기 때문에 non-Semantic Tag로 분리하면 된다.
2. Sectioning VS Item
Sectioning Tag
Sectioning Tag는 일종의 컨테이너를 의미한다. 구획을 나눌 뿐, 브라우저 상에는 보이지 않는다. Sectioning Element를 만드는 Tag는 다음과 같다.
<header>,<section>,<footer>,<article>,<nav>,<div>,<aside>,<span>,<main>,<form>
Semantic과 Sectioning에 포함된 Tag들이 거의 비슷하지만 Semantic과 Sectioning의 분류목적이 다르다.
Semantic vs non-Semantic은 Element에 의미론적인 중요도가 있냐 없냐를 나누는 것이라면,Sectioning vs Item은 Layout을 위해 구획을 나누는 Tag냐 혹은 브라우저에 보여지는 Tag냐를 구분하는 것임
Item Tag
아이템이 되는 태그(사용자가 직접 보여지는 태그)
<a>,<video>,<button>,<audio>,<input>,<map>,<label>,<canvas>,<img>,<table>
<h1>과 같은 태그는 자동적으로 컨텐츠를 스타일링 해주기 때문에 박스보다는 아이템에 가깝다.<button>태그와 같이 보편적인 아이템 태그들은 컨텐츠가 없어도 자동적으로 브라우저에 렌더링하여 보여준다.
3. Inline VS Block
HTML 태그는 쓰임에 따라 구분하기도 하지만, inline이냐 block이냐에 따라서도 분류가 가능하다
-
Block Element
viewport 너비를 한 엘리먼트가 다 차지한다. 따라서 다음에 오는 엘리먼트는 아래에 배치된다. Block 요소는 뷰포인트의 한 줄을 모두 차지하는 요소다. -
Inline Element
viewport 너비 중, 엘리먼트가 실제로 사용하는 만큼한 차지한다.즉, 뷰포인트에 들어갈 공간이 남아 있다면, 그 공간에 배치된다.
W3C (World Wide Wep Consortium)
- 웹의 표준화를 추진하는 단체
- 다양한 브라우저들은 W3C에서 정한 표준을 따르고 있다.
웹표준에 없는 태그를 사용할때
<body>
<something>awk tag</something>
</body>브라우저는 에러가 발생하면, 에러를 스스로 회복하게 된다.
따라서 우리는 awk tag라는 컨텐츠를 브라우저에서 볼 수 있다.
Next Posting
오늘 포스팅은 컨텐츠를 배치하기 위한 태그와 관련되어 있었습니다. 다음 포스팅에는 UI적 요소가 아닌, 메타 데이터를 명시하는 태그들에 대해 포스팅하겠습니다. 그와 관련된 태그에는 아래와 같은 것들이 있습니다.
<base>, <head>, <link>, <meta>, <style>, <title>
