[Front-End] HTML 배우기 : Semantic HTML

- 의미론적 HTML(Semantic HTML): 기존 HTML구조(Non-semantic HTML)보다 접근성이 좋고, 검색 엔지 최적화를 향상하며, 쉽게 이해할 수 있기에 사용하는 방식임.

 

⤷ Semantic HTML에 대한 이해를 도울 수 있는 글

www.internetingishard.com/html-and-css/semantic-html/

Semantic HTML | HTML & CSS Is Hard

 

① 헤더와 내비게이션: <header>는 주로 내비게이션 링크 또는 <h1>같은 제목들을 포함하고, <nav>는 메뉴와 같은 내비게이션 링크들을 위해 사용됨.

ex) <header>가 <nav>를 포함하고 <nav>는 순서가 없는 목록으로 one과 two를 연결하고 있다.

<header> 
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>      
    </ul>
  </nav>
</header>

 

② 메인과 푸터: <main>은 웹 페이지의 지배적인 내용들을 함축하기 위해 사용하며 <article>과 <header>태그를 포함하고, <footer>는 컨텍 정보, 저작권 정보 등으로 주요한 정보의 아래쪽에 있는 것을 말하는데 <main>요소와 분리되어 있음.

ex) <main> 안에 <header>와 <article>을 사용할 수 있다.

<main>
  <header>
    <h1>Kind of Fruits</h1>
  </header>
  <article>
    <h3>Apple</h3>
    <p>
      Apple is the one of healthy fruits.
    </p>
  </article>
</main>

ex) <footer>를 컨텍 정보를 보여주기 위해 사용했다.

<footer>
  <p>Send emial to Sam@email.com</p>
</footer>

 

③ 아티클과 섹션: <section>은 챕터, 제목처럼 문서에서 요소를 정의하고, <article>은 이것 스스로 의미가 통하는 내용을 담고 있는 요소이며 기사, 블로그, 댓글, 잡지 등과 같은 내용을 포함.

ex) <section> 안에 <article>이 위치하는 예시이다. (문맥에 따라 <article>이 <section> 안에 들어갈 수도 있다.)

<section>
  <h2>Information About Sam</h2>
  <article>
    <p>Sam likes an apple and banana.</p>
  </article>
</section>

 

④ 그 외의 요소: <aside>는 주요 내용을 이해하기에 필수적이지는 않지만 다른 요소들을 강화하는 추가적인 정보를 나타내기 위해 사용되며, <article>과 <section>같은 다른 요소들과 나란히 사용될 수 있음. 흔히 참고 문헌, 댓글, 추가적인 정보 등을 위해 사용됨.

ex) <article>은 중요한 내용이지만 <aside>는 이해를 위해 필수적인 정보는 아니다.

<article>
  <p>Sam likes an apple and banana.</p>
</article>
<aside>
  <p>
   This content is from "Sam's Diary". 
  </p>
</aside>

 

⑤ 그림과 그림주석: <figure>은 이미지, 일러스트레이션, 다이어그램 등의 모든 종류의 미디어를 함축하기 위해 사용하며 <figcaption>은 <figure>태그 안에서 미디어를 묘사하기 위해 사용함.

ex) <figure>을 이미지를 표현하기 위해 사용하고, 이미지 아래에는 <figcaption>으로 적은 텍스트가 보이게 된다.

<figure>
  <img src="image.jpg">
  <figcaption>This image shows image.</figcaption>
</figure>

 

⑥ 오디오와 속성: <audio>는 오디오를 문서에 넣기 위해 사용되며 오디오 링크를 위해 src속성을 사용함.

ex) <audio>요소의 <source>태그에 오디오를 링크하여 오디오를 사용한다. 

<audio controls>
  <source src="audio's location.mp3" type="audio/mp3">
</audio>

 

⑦ 비디오와 임베드: <video>는 웹사이트에 비디오를 더할 수 있게 해 줌. controls, autoplay, loop 속성을 이용할 수 있으며 <embed>태그를 사용하여 비디오, 오디오, 짤들을 사용할  수 있음.

ex) <video>여는 태그와 닫는 태그 사이에 텍스트는 비디오가 연결되지 않을 때를 위해 작성한다.

<video src="video's location.mp4" controls>Video can not supported.</video>

ex) <embed>태그는 닫는 태그가 없다.

<embed src="gif's location.gif"/>