Semantic HTML 에 대해서 / 코드카데미 프론트엔드 디벨로퍼 코스 #4

그림판으로 만들어서 그런지 좀 조악하네요;;

 

 

이전까지 HTML의 기초 그리고 Table에 대해서 다루었다. 

이번에는 Semantic HTML이라고 하는 파트이다. 

 

Semantic HTML이란? 

Semantic 이란 "의미와 연관되는"이라는 뜻이라고 Codecademy에서 설명하는데 , 예를 들자면 단순히 div를 써서 코딩을 구분짓는 것보다는 header라고하는 보다 직관적인 요소를 사용해서 구분하면 우리가 볼 때 눈에 확 들어오고 , '아 이게 머릿말 부분이구나' 하는 식으로 이해할 수 있다는 것을 설명하는 것이 Semantic 이라는 용어 같다. 

 

+ Codecademy 퀴즈를 풀다보니까 이해가 된 부분이 있다. Semantic한 태그를 쓸 경우 우리가 딱 보고서 어? 이거 미디어 삽입을 위한 태그구나, 아니면 어? 이부분은 페이지에서 가장 중요한 본문이 나오겠구나 할 수 있게 해주는 것이 Semantic HTML의 목적이다. 

Semantic HTML을 사용하는 세가지 이유

• 접근성 : Semantic HTML의 경우 모바일 환경이나 장애를 가진 사람들에게 보다 나은 접근성을 제공한다. 화면을 해석하는 데있어서 더 잘 해석해줄 수 있기 때문이다. 
• SEO(검색엔진최적화) : 검색엔진의 최적화를 시켜준다. 사람들의 방문을 보다 늘릴 수 있게 된다. 
• 이해하기 편함 : Semantic HTML을 통해 웹사이트의 소스코드를 보다 이해하기 쉽게 만들 수 있다(다른 개발자들을 위해서) 

 

대표적인 Semantic HTML 요소들 

Header 

  : header 태그의 경우 뭔가 안내하는 첫 문단이 시작할 때 사용하는 경우가 많다. Navigational link(링크를 클릭하면 해당 목차로 넘어가는 것 처럼)나 혹은 소개하는 내용이 나올 때 쓴다고 한다. 

Nav

  : header 안에서 쓰일 수도 , 혹은 독자적으로 쓰일 수 도 있다. 목차를 형성하고 해당 목차를 구분짓는 역할을 한다. 주로 list(ul 혹은 ol)과 함께 쓰인다. 

예시) 

 

<header>
  <nav>
    <ul>
      <li><a href="#1">Home</a></li>
      <li><a href="#2">About</a></li>      
    </ul>
  </nav>
</header>

 

 Main 

 웹페이지의 주된 내용(dominant content)를 구획으로 나누기 위한 장치로 아래처럼 쓰일 수도 있고, main 밖에 header를 쓸 수 도있다. 

예시) 

 

<main>
  <header>
    <h1>----</h1>
  </header>
  <article>
    <h3>----</h3>
    <p>

              ----

     </p>
  </article>
</main>

 

 이와 관련해서 꽤나 긴 포럼 질문 스레드가 있어서 흥미로웠는데, 쟁점은 header를 main 안에 넣어야 하는가 아닌가에 대한 내용이었다. 결론적으로는 HTML에는 늘 '규칙'은 없다는 것. 하지만 결론적으로 SEO 최적화의 관점에서 는 , header 그리고 main 그리고 footer 를 배열하는 것이 좋다는 것. 또한 더 Semantic 한 웹페이지 일수록 봇들이 서치하기 더 좋다는 것. 

 

 원론적으로 옳은 답만 하고자 하는 고수도 있고, 실용적으로 딱딱 나눠서 답변하고자 하는 사람들도 있어서 꽤나 흥미로웠다. 

Footer 

 웹사이트의 정보, 저작권, 연락처 등을 적어놓는 자리. 

Section

 한 문서의 여러 부분들을 테마(주제)에 따라 나누는 역할을 한다. 

Article

 article은 기사 혹은 글의 덩어리 정도로 이해하면 되는데, Codecademy에서는 '그자체로 말이 되는' 것이 들어간다고 표현했다. 단어 그대로 일정한 주제의 기사나 잡지 글 등이 들어가는 공간이라고 생각하면 된다. 예시에서는 Section 안에 Article이 들어가 있다. Screen reader 사용시 사용자가 보다 쉽게 '아! 여기에 기사 내용이있구나' 하는 것을 알게 해준다. (아래 에시참조, 내용은 그냥 막 넣어봤습니다)  또한 내용에 따라 Article 안에 Section이 들어갈 수도 있다. 

<section>
  <h2>한국음식의 종류에 대해 알아봅시다</h2>
  <article>
    <p>한국음식에는 주로 김치를 활용한 음식, 채소를 활용한 음식, 고기를 활용한 음식들이 있습니다 </p>
  </article>
</section>

 

Aside

Aside element는 다른 주된 내용을 이해하는데 도움을 주는 부수적인 내용이 들어가는 칸을 위해 사용하는 요소이다. article 혹은 section과 같이 쓰일 수 있는 요소이고,  예를들면 아래와 같다. 

 1) 참고문헌 목록

 2) 인용구 

 3) 추가정보

 4) 편집자 주

 5) 코멘트

 6) 미주(endnote) 등 

 

 

Figure / Figcaption 

 안에 그림, 미디어 등이 들어가는 것을 위해 Figure를 이용하고, 해당 그림에 대한 부연 설명을 Figure의 하위 요소로 figcaption을 이용하여 적는다. 

<figure>
  <img src="아무사진">
<figcaption>이 사진은 아무 사진입니다.</figcaption>

<!-- figcaption은 figure 태그 내의 초반 혹은 후반에 사용될 수 있음--!>
</figure>

 

Audio

 Audio의 Attributes 들 : controls, src, autoplay 등 (기타 아래 링크 참조) 

 아래의 src 는 url을 불러오고, type 은 브라우저에게 해당 파일이 무슨 타입인지 설명해주는 기능을 한다. 브라우저가 지원하는 타입인지 아닌지 알 수 있게함

 source가 closing tag 없이 사용된 것을 체크

 

<audio>
  <source src="음악파일.mp3" type="audio/mp3">
</audio>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attributes

<audio>: The Embed Audio element - HTML: HyperText Markup Language | MDN

 

 

Video / Embed 

*다만 Embed는 더이상 쓰이지 않는(deprecated) 태그로 나온다. 참고의 의미(purpose of legacy)로 Codecademy에서 가르친다고 나오기는 한다. 아래 링크에서 더이상 쓰이지 않는 Tag들의 목록을 확인할 수 있다. 

https://www.geeksforgeeks.org/html-deprecated-tags/

HTML | Deprecated Tags - GeeksforGeeks

 

 Video는 말그대로 비디오를 표시, Atrribute는 Audio와 비슷하고, Loop라는 반복재생 Attribute가 있다. 

예시

<video src="비디오.mp4" controls>비디오가 지원되지 않습니다.</video>

 

 

 Embed 는 self closing tag라서 closing이 필요 없고, 음악 비디오 gif 등 온갖 종류의 미디어를 표시할 수 있다. 

예시

<embed src="움짤.gif">

 

 

 

관련한 질문들

 Header를 main 안에 넣어야 하는가? 아니면 안되는가? 

 답: 위 글 참조

 

 Semantic HTML을 사용한다면 div 와 같은 non semantic HTML은 필요가 없는 것인가? 

답 : Semantic HTML을 사용하는 것은 주로 메인 구조를 짤 때 이고 이 때는 거의 무조건 사용하는 것이 권고가 되지만, 그렇다고 해서 div 및 div에 결속되는 id 와 class 요소들이 사용되지 않는 것은 아니다. id와 class 설정이 들어간 div는 매우 실용적이고, 따로 Semantic HTML을 쓰지 못할 것 같은 곳에는 당연히 div 등을 쓸 수 있다 .;

 

 언제 어디서나 Semantic HTML을 사용해야하는 것인가? 

답 : 만약 Semantic HTML을 사용할 수 있는 상황이라면 사용하는 것이 권고됨. 그게 아닐 경우에만 Non semantic을 사용할 수 있음 

 

 Audio tag 에 바로 src 를 넣지 않고 꼭 source 태그를 활용 해야 하는가? 

답 : Semantic HTML을 사용하는 것은 주로 메인 구조를 짤 때 이고 이 때는 거의 무조건 사용하는 것이 권고가 되지만, 그렇다고 해서 div 및 div에 결속되는 id 와 class 요소들이 사용되지 않는 것은 아니다. id와 class 설정이 들어간 div는 매우 실용적이고, 따로 Semantic HTML을 쓰지 못할 것 같은 곳에는 당연히 div 등을 쓸 수 있다 .;

 

Video Tag 와 Embed Tag중 뭘 사용해야 하는가? 

 답: Embed Tag 의 경우 SEO의 측면에서나, Semantic 의 측면에서나 지양되어야 하는게 맞다. Video 라면 Video Tag를 쓰고 ,  Img 라면 img 태그를 쓰고 , 음악이라면 Audio Tag를 쓰는 것이 더 나은 방법이다. 또한 2020년 이후로는 flash가 지원되지 않기 때문에 이런식으로 상세하게 나눠서 쓰는 경우가 많아질 것이다. (위 언급된 태그를 제외하고서는 Embed를 쓸 수 있다고 하는 답변도 있었음  gif의 경우 embed를 쓴다는 사람도 있었고, img 를 쓰는게 낫다고 하는 사람도 있었음 )

 

느낀점

 It's all about READABILITY! 

 

참고할 사이트

 

https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element

HTML Standard

https://www.w3schools.com/tags/tag_embed.asp

HTML embed Tag