1. semantic web이란?
시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
웹 2.0 시대가 시작되면서 사용자들이 생산하는 정보들이 많아지다가 그 양이 너무 많아졌습니다.
우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었죠. 이렇게 되면 사람들이 일일이 수많은 정보들 가운데에 자신이 필요한 정보를 찾아 나서야 하는 문제점이 생기게 됩니다.
이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했다.
시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미하고 그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해주어야 합니다.
하지만 과거의 웹 문서는 많은 정보를 담지 못했습니다.
예를 들어서 웹 사이트에 대한 설명을 넣고 싶었다면, <body></body>에 직접 웹사이트에 대한 설명을 넣는것 외에는 방법이 없었다. 그런데 태그에 들어간 내용들은 사람들에게 보여주고 싶을 때나 아닐 때나 항상 보이게 됩니다.
하지만 지금은 태그를 이용해 다양한 설명과 이미지, 파비콘 등을 지정할 수 있게 되면서 웹 문서에 담을 수 있는 정보들이 늘어났다.
시맨틱 웹은 여기에서 한 단계 더 나아간 방식입니다. 웹 문서에 더 많은 정보들을 담을 수 있고, 웹 문서를 크롤링해가는 검색 엔진 로봇들에게 더 많은 정보를 알려줍니다.
예를 들어
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
<header>와 같이 태그를 사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 이해할 수 있고 혼자만이 아닌 누가 봐도 이 태그가 의미하는 걸 알아볼 수 있게 작업이 가능합니다.
시맨틱 웹은 앞으로 사람만이 인식할 수 있는 범위의 웹페이지가 아니라 기계가 이해할 수 있는 웹페이지의 표준 언어가 되는 것을 목표로 하고 있습니다.
2. semantic tags이란?
Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.
div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.
시멘틱 태그가 중요한 이유
- SEO 검색 최적화
- 검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우저의 검색 엔진이 내가 만든 웹사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있다.
- 웹접근성
- 웹페이지를 시각적이 아니라, 음성으로 읽어주는 스크린리더를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.
- 유지보수성
- 단순히, div tag로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.
시멘틱 요소의 예시
- <article>
- 내용을 정의한다.
- <aside>
- 페이지 콘텐츠를 제외한 콘텐츠를 정의한다.
링크, 광고, 사이드바 표시 등.
- 페이지 콘텐츠를 제외한 콘텐츠를 정의한다.
- <details>
- 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다.
- <figcaption>
- 요소에 대한 캡션을 정의한다.
- <figure>
- 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
- <footer>
- 문서 또는 섹션의 바닥글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입되며 <header>, <section>, <article> 등 다른 레이아웃 사용가능.
- <header>
문서나 섹션의 머리글을 지정한다. 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다. - <main>
- 문서의 주요 내용을 지정한다.
- <mark>
- 강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다.
- <nav>
- 내비게이션 링크를 정의한다. 같은 사이트 내의 링크나 다른 사이트로의 링크들의 모음이다.
- <section>
- <header>, <footer>와 함께 문서의 구역을 정의한다.
<section> 안에<section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
- <header>, <footer>와 함께 문서의 구역을 정의한다.
- <summary> (화살표 클릭!)
- 요소를 위한 눈에 보이는 제목을 정의한다.
- <time>
- 날짜/시간을 정의한다.
'Javascript' 카테고리의 다른 글
[javascript] Object - 유저의 nickname과 interests 넣기 (0) | 2023.01.16 |
---|---|
[javascript] 최소 ~ 최대값 랜덤 수 뽑기 (0) | 2023.01.16 |
[javascript] async & await (0) | 2023.01.16 |
[javascript] Promise (0) | 2023.01.16 |
[javascript] 비동기 처리 (0) | 2023.01.16 |
댓글