TIL 03 Semantic HTML

Intro

얼마 전 이사를 했다.
박스에 차곡차곡 물건들을 담는 것도 정말 중요하지만, 박스에 무엇을 넣었는지 써놓는 것도 정말 중요하다..
어디에 뭐가 있는지 알 수 가 없으니 다시 꺼내어 정리를 하려니 아주 난감했다😭😭😭

Semantic HTML이 중요한 이유가 바로 이러한 이유일 것이다.

오늘의 방정리를 생각하며,,,!
한 순간의 귀찮음으로 <div>를 남발하지 말아야겠다고 다짐한다...!

HEADER and NAV

• HEADER for navigation links or headings.

• NAV is used to define a block of navigation links.

  → NOTE : it can be used inside of HEADER but also on its own.

MAIN and FOOTER

• contents for FOOTER : Contact info, Copyright info, Terms of use, Site Map, Ref to top page links

🙋 Can MAIN have HEADER?

ARTICLE and SECTION

• SECTION defines elements in a doc, such as chapters, headings or any other area of the doc with the same theme.
• ARTICLE has content that makes sense on its own, such as aricles, blogs, comments, magazines, etc.
• ex)

<section>
  <h2>Fun Facts About Cricket</h2>
  <article>
    <p>A single match of cricket can last up to 5 days.</p>
  </article>
</section>

STRONG vs BOLD style

• 물론 Font-weight으로 굵기를 조절할 수 도 있지만, 문서에서 중요한 부분은 strong으로 명시하는 것이 더욱 좋다!

ASIDE

• for marking additional info that can enhance another element. (not required to understand the main part.)
• can be used alongside with ARTICLE or SECTION
• commonly used for : Bibliographies(참고문헌), Endnotes, Commets, Pull quotes, Editorial sidebars, Additional info.

FIGURE and FIGCAPTION

• img and illustration
• FIGURE is used to encapsultaed media such as an image, illustration, diagram, code snippet etc, which is referenced in the main flow of the document.
• FIGCAPTION(explanation of the figure) can be moved with FIGURE.

AUDIO and Attributes

<audio>
	<source src='something.mp3' type='audio/mp3' autoplay controls>
</audio>

: The Embed Audio element

VIDEO and EMBED

<video src="coding.mp4" controls>Video not supported</video>
<!--autoplay, loop, controls-->

<embed src="download.gif"/>

Summary

• <header>, <nav> , <main> and <footer> create the basic structure of the webpage.
• <section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
• <article> holds content that makes sense on its own such as articles, blogs, comments, etc.
• <aside> contains information that is related to the main content, but not required in order to understand the dominant information.
• <figure> encapsulates all types of media.
• <figcaption> is used to describe the media in <figure>.
• <video>, <embed>, and <audio> elements are used for media files.