Semantic Web과 Semantic Tag

Semantic HTML 을 사용함으로써 HTML 구성 요소의 보여주기 방식이 아닌 구성 요소의 의미로 나누어 사용할 수 있다.

Semantic HTML 을 사용하는 이유

1. 접근성 : 브라우저나 스크린 리더등의 요소에서 해석이 용이하다.

2. SEO : Search Engine Optimization 즉 개인의 웹페이지 노출에 유리하다. 더 좋은 SEO를 통해 검색엔진에서 개인의 웹사이트상의 정보를 쉽게 구분 가능하며 주요한 정보를 적절하게 판단 가능하다.

3. 가독성 : 웹사이트상의 내용을 다른 개발자들이 파악하기 쉽다.

Semantic Tag 의 종류

• Header : container usually for either navigational links or introductory content containing h1 to h6 headings.

• Nav : used to define a block of navigation links such as menus and tables of contents

• Main : used to encapsulate the dominant content within a webpage. This tag is separate from the footer and the nav of a web page since these elements don’t contain the principal content. By using main as opposed to a div element, screen readers and web browsers are better able to identify that whatever is inside of the tag is the bulk of the content.

• Footer : The content at the bottom of the subject information is known as the footer, indicated by the footer element. The footer contains information such as:
  - Contact information
  - Copyright information
  - Terms of use
  - Site Map
  - Reference to top of page links

• 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. article can hold content such as articles, blogs, comments, magazines, etc

• Aside : element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.

• Figure : is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.

• Figcaption : is an element used to describe the media in the figure tag.

• Audio : audio element is used to embed audio content into a document. Like video, audio uses src to link the audio source.

• Video : we can add videos to our website:
  - controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option.
  - autoplay: The attribute which results in a video automatically playing as soon as the page is loaded.
  - loop: This attribute results in the video continuously playing on repeat.

사이트에 이미지를 넣는 두 가지방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

1. img 태그를 사용하는 것 - 가장 일반적인 방법으로 태그안에 해당 컨텐츠가 이미지라는 정보를 담고 있다. 이미지가 컨텐츠의 일부이거나 관련된 내용을 담고 있다면 사용하는것이 유리하다.

2. div 태그에 background-image 속성을 추가하는 것. 이미지가 컨텐츠의 일부가 아니거나(웹상의 시간 혹은 날짜 표기), 텍스트 대체용으로 사용하는것이라면 사용하는것이 유리하다.