Semantic Web 그리고 Semantic tag와 Non-Semantic tag

김주현·2021년 8월 31일
2

[HTML&CSS]

목록 보기
2/3

Semantic Web

시멘틱 웹이란 '의미있는 웹'이라는 뜻을 가지고 있으며 단순히 사람만이 웹의 정보를 파악하는 것이 아니라 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 시멘틱 웹의 목적이다.

Semantic tag

시멘틱 태그가 등장하기 전인 html4문서에서는 화면을 구성하는 역할은 대부분 div태그가 맡았다. id속성으로 구분하였기 때문에 사용자 개인의 생각에 따라 각각 다르게 지정되었다. 하지만 이런 방법은 제작자 자신이 나중에 보기에도 어렵고 담당자가 바뀌면 문서구조를 이해하는데 많은 시간이 걸리게 된다. 또한 소스가 수천줄이 될 수도 있는 상황이라면 더더욱 구조를 찾기까지 많은 시간이 소요가 된다. -> Non-Sementic tag

HTML5문서에서 이러한 단점들을 보완하여 나온 것이 시멘틱 태그이다. 시멘틱 태그는 사전상 '의미론적인,의미상,의미가 통하는'이라는 뜻을 가지고 있듯이 콘텐츠의 의미를 명확하게 설명하는 역할을 한다.

왜 시멘틱 태그로 레이아웃을 만들어야 할까?

시멘틱 태그를 통해 웹사이트의 어느 부분이 제목이고 내용인지 <header><nav>태그 부분을 검색하지 않고 실제 내용이 들어 있는 <section>이나 <article>태그 부분만 찾아 검색하면 되니까 그만큼 사이트 내용을 정확히 전달할 수 있다.
그리고 어떤 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있다.


위 사진을 참고하여 웹사이트의 개발자 도구(F12)를 사용하면 시멘틱태그를 확인할 수 있습니다

시맨틱태그는 웹사이트별로 문서구조는 약간씩 다르겠지만 header태그와 section태그, footer태그 순으로 이루어진다.

<header> - 머리말을 지정하는 태그


헤더의 내용으로는 주로 <form>태그를 사용해 검색창을 넣거나 <nav>태그를 사용해 사이트 메뉴를 넣는다.

위 사진처럼 <nav>태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용 된다.
다시말해 사용하는 위치의 영향을 받지 않아 <header><footer>태그 또는 <aside>태그 안에 포함시킬 수 있고 독립해 사용할 수 있다.

<section> - 주제별 콘텐츠영역 나타내기

section태그는 문서에서 콘텐츠 영역을 나타낸다. 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 hn제목태그를 함께 사용한다.

<article> - 독립적인 콘텐츠 내용을 삽입하는 태그

article태그는 사전적 의미가 신문이나 잡지의 '기사'를 뜻하는 것처럼 웹상의 실제 내용을 넣는다.
section 태그 안에 article태그가 포함되는 것이 일반적이지만 맥락에 따라 article태그 안에 section태그를 넣을 수도 있다.

<aside> - 본문 이외의 내용 표시하기

사이드바는 필수요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용한다,

<iframe> - 외부 문서를 삽입하는 태그

웹문서 안에 다른 웹문서를 가져와 표시하는 것을 인라인 프레임이라고 하는데, 인라인 프레임을 삽입하는 태그는 <iframe>이다.

<iframe src="삽입할 문서 주소" [속성="속성값]> </iframe>


<footer>태그 안에는 <header>태그를 비롯해 section,article 등 다른 레이아웃 태그를 사용할 수 있다.

Non-Semantic Tag

Semantic Tag과 반대로 Non-Semantic Tag는 div태그 및 span태그에 역할을 부여하여 사용하는데, 나중에 그 태그가 어떤 역할을 하는지 이해하기가 어렵다.

img태그와 div태그를 이용해서 이미지 넣기

  • <img>태그와 <div>태그 둘다 사용하여 이미지를 삽입할 수 있지만 검색엔진에서는 <img>는 검색이 되도 <div>는 검색이 되지 않을 수 있다.

  • <img>태그에 이미지가 로딩이 실패한 경우 alt속성을 통해서 어떤 정보를 적었는지 파악할 수 있지만 <div>태그는 로딩에 실패하게 된다면 왜 에러가 났는지 정보를 파악하기가 어렵다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            background-image : url('https://newsimg.hankookilbo.com/cms/articlerelease/2019/04/29/201904291390027161_3.jpg');
            width: 200px;
            height: 200px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <img src="https://newsimg.hankookilbo.com/cms/articlerelease/2019/04/29/201904291390027161_3.jpg" alt="cat">
    <div></div>
</body>
</html>

위 예제에서 볼 수 있듯이 non-semantic element인 div보다 semantic element인 img를 사용하는 것이 태그의 의미와 정보를 파악하기가 쉽다. 그만큼 정보를 찾는 시간이 줄어들게 되면서 높은 효율을 낼 수 있다.

Conclusion

시멘틱 태그를 잘 활용하면 웹사이트를 좀더 편리하게 구성하기 좋으니까 시멘틱 태그를 자주 쓰려고 노력해야겠다.


참고문헌 : Do it! HTML5 + CSS5 웹표준의 정석
참고사이트 : https://eunsukimme.github.io/html/2019/12/18/Semantic-Web/
https://velog.io/@jongsunpark88/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8Semantic-Tag-VS-%ED%83%9C%EA%B7%B8non-semantic
https://fierycoding.tistory.com/55
https://poiemaweb.com/html5-semantic-web

0개의 댓글