[학습일지]JAVA교육일지 8일차

1 / 9
Introduction to Semantic HTML

웹 페이지를 만들 때
semantic HTML
non-semantic HTML 둘 다 사용

semantic HTML (의미O)
non-semantic HTML(의미X)

ex) <div> 나 <span> 태그 : non-semantic elements 반면 제목의미<header> 태그: semantic element

Semantic HTML 을 사용하는 이유

1. Accessibility
; 모바일 기기나 장애가 있는 사람들의 접근성을 높여준다. 스크린 리더가 코드를 해석하는 데 도움이 되기 때문이다.

2. SEO(Search Engine Optimization)
; 서치 엔진이 제작한 웹페이지를 더 잘 분석할 수 있도록 함으로써 보다 많은 방문자가 웹페이지를 찾을 수 있도록 한다

3. Easy to Understand
; 개발자 간 코드를 파악하는 데 용이하다

2 / 9
Header and Nav

<header> ; <h1> ~ <h6> 태그를 담는 데 쓰인다

<header> 태그를 쓸 때와 <div> 태그를 쓸 때의 차이점은 전자에서는 태그 간의 부모 자식 관계가 명확하게 드러나고 그 코드의 내용들을 파악하기 쉽다는 것이다

<nav> 태그는 메뉴나 표 같은 덩어리들을 담을 때 사용된다
<nav> 태그는 <header> 태그의 자식으로 쓰일 수도 있고 독립적으로 쓰일 수도 있다

3 / 9
Main and Footer

<main> 과 <footer> 태그는 <nav> 와 <header> 태그와 함께 각 요소들이 어디에 위치해야하는지를 나타낸다
<main> 태그는 웹페이지의 주요한 내용을 담게 되므로

<footer> 와 <nav> 태그와 분리된다

<div> 태그 대신 이 태그를 사용함으로써 스크린 리더나 웹브라우저가 내용을 좀 더 정확히 식별할 수 있다

<footer> 태그는 웹페이지의 최하단에서 연락처, 저작권, 사이트맵 등 부가적인 정보를 담게 된다

4 / 9
Article and Section

<section> 태그는 챕터나 제목 같은 내용들을 담는 데 사용된다

<article> 태그는 기사, 블로그 등의 내용을 담는 데 사용되고 스크린 리더가 article content 가 어디에 위치하는지 알기 쉽게 도와준다

5 / 9
The Aside Element

<aside> 태그는 주로 <article> 또는 <section> 과 같은 태그와 함께 쓰이며 부가적인 정보를 다룰 때 사용된다

전기, 일화, comment, 인용 등의 내용을 다룬다

6 / 9
Figure and Figcaption

부가적인 내용을 다룰 때 text 가 아닌 이미지나 삽화 등으로 설명하고자 한다면 <aside> 태그 대신 <figure> 태그를 사용할 수 있다

예를 들어 <figure> 태그는 <img> 태그를 자식으로 가질 수 있는 것이다

<figcaption> 태그는 <figure> 태그의 자식으로 쓰이며 <figure> 태그에 사용된 media 에 대한 설명을 담고 있다

7 / 9
Audio and Attributes

<audio> 태그는 말 그대로 audio content 를 담는 데 사용되며 src 속성을 사용한다

<audio> 태그의 자식으로 <source> 태그를 사용하고 이 때 속성을 src 로 삼으며, type 속성을 가질 수 있다. type 속성은 반드시 필요한 것은 아니지만 사용되었을 경우 웹브라우저가 실행할 수 있는 파일인지 아닌지를 수월하게 판단할 수 있게 된다

<audio> 태그에 controls 속성을 추가하여 컨트롤 바를 생성할 수 있고, src 속성으로 URL 이나 오디오 파일을 명시할 수 있다


8 / 9
Video and Embed

<video> 태그에 사용될 수 있는 대표적인 속성은 다음과 같다

; controls - 컨트롤바를 생성한다
; autoplay - 웹사이트에 접속하는 순간 자동재생한다
; loop - 영상이 반복적으로 재생되도록 한다

media 를 웹페이지에 포함시킬 때 이전에는 <embed> 라는 태그를 사용했다. 동영상, gif, audio 파일 등 구분하지 않고 가져다 쓸 수 있다.

이 때 src 속성으로 가져올 수 있고, 현재는 <vidoe>, <audio>, <img> 태그 등으로 대체되었으나 법적으로 사용되는 태그이다

9 / 9
Review
- Semantic HTML 은 웹페이지에 나타나는 내용들이 어떤 의미를 갖는지에 대한 정보를 제공한다

- Semantic HTML 은 스크린 리더를 사용하는 사람들에게 유용하고 SEO 가 웹페이지를 해석할 때도 도움이 된다

- <header>, <nav>, <main>, <footer> 태그들은 웹페이지의 기본 뼈대를 구성한다

- <section> 태그는 챕터, 제목 등과 같은 같은 테마를 지닌 요소들을 하나로 묶어준다

- <article> 태그는 article, 블로그, comment 와 같은 내용들을 담는다

- <aside> 태그는 main content 와 관련이 있지만 반드시 필요한 것은 아닌 내용들을 담는다

- <figure> 태그는 모든 종류의 media 를 포함한다

- <figcaption> 태그는 <figure> 태그에 사용된 media 를 설명하는 데 쓰인다

- <video>, <embed>, <audio> 태그는 media 파일들을 다룰 때 사용된다