🌼 Semantic HTML
시맨틱(semantic) 태그는 태그의 이름만으로 HTML 파일의 구조 정보를 제공하여 웹페이지의 유기적인 구조를 더 알기 쉽게 도와주며 사용자의 접근성을 높혀준다.(SEO: Search Engine Optimization)
-
<header>:<h1>~<h6>태그와 함께 쓰이며 문서의 타이틀 정보를 표현할 때 사용한다. -
<nav>: nav는 navigation을 의미하며 하이퍼링크 형태의 메뉴 혹은 목차를 정의할 때 사용한다. header 태그 안에 사용하지만 단독으로도 사용하는 경우도 있다.
<header>
<h1>Navigational Links</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav><main>: 웹페이지의 주요 내용을 표현할 때 사용한다.
<main>
<header>
<h1>Types of Sports</h1>
</header>
<article>
<h3>Baseball</h3>
<p>
The first game of baseball was played in Cooperstown, New York in the summer of 1839.
</p>
</article>
</main><footer>: 웹페이지의 꼬리말로 사용될 수 있는 내용을 표현할 때 사용한다.
(연락처, 저작권 정보, Terms of use, Site map, 참조정보)
<footer>
<p>Email me at Codey@Codecademy.com</p>
</footer>-
<article>: 기사, 블로그, 잡지의 기사 등과 같은 독립적인 형태의 컨텐츠를 표현할 때 사용한다. -
<section>: 페이지 내에서 다른 성격을 지닌 컨텐츠들을 구분할 때 사용한다. -
<aside>: 필수 정보는 아니지만 주컨텐츠의 이해를 돕는 보조적인 정보를 나타낼 때 사용한다. (참고문헌, 주석, 논평, 인용구, 추가정보 등)
<article>
<p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p>
</article>
<aside>
<p>
Babe Ruth once stated, “Heroes get remembered, but legends never die.”
</p>
</aside>-
<figure>: 이미지, 일러스트, 도표 등의 이미지 정보를 표현할 때 사용한다. -
<figcaption>:<figure>태그로 정의된 정보의 이름을 정의할 때 사용한다. -
<audio>: 음성 정보를 표현할 때 사용한다. -
<video>: 페이지에서 동영상 정보를 표현할 때 사용한다.-
controls: 동영상 재생시 사용하는 버튼 기능을 제공하는 attribute이다. -
autoplay: 동영상을 자동으로 재생하도록 하는 기능을 제공하는 attribute이다. -
loop: 동영상을 반복 재생하도록 하는 기능을 제공하는 attribute이다.
-
-
<embed>: 외부 응용 프로그램(웹페이지, 사진, 동영상) 혹은 브라우저 플러그인과 같은 컨텐츠를 표현할 때 사용한다. html4는 지원하지 않다가 html5에서 다시 추가되었다. 클로징 태그가 없어 자식요소를 가질 수 없다.
<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>
<audio autoplay controls>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>
<video src="coding.mp4" controls>Video not supported</video>
<embed src="download.gif"/>