working_helen
[ Week 2 ] Structure with HTML 본문
Lecture : Media Computation
Date : week 2, 2024/03/04
Topic : Structure with HTML
1. HTML element 구조
2. Semantic Containers for Structure
1. HTML element 구조
- hierarchical tree of elements
- 크게 <head> 내부와 <body> 내부로 구분
- child tag가 parent tag 내에서 열리고 닫히는 방식
1) <head></head>
(MDN) The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
- HTML 문서의 title, JAVA script, CSS style sheets 등 문서 설정과 관련된 정보를 저장하는 공간
- 웹페이지 상에 사용자에게 보여지는 정보가 아닌, 컴퓨터가 문서를 처리하는데 필요한 정보를 저장하는 공간
※ <header> 태그는 사용자에게 보이지만, <head>는 사용자에게 보이지 않음
2) <body></body>
(MDN) The <body> HTML element represents the content of an HTML document.
- HTML 페이지 내에 표시될 모든 element들을 구현하는 공간
- 웹페이지 상에 사용자에게 직접적으로 보여질 내용들을 설계
- 1개의 body 태그만 존재
- child 태그로 basic element와 structural element를 가짐
- basic element : <h1>, <p>, <input>, <img> 등
- structural element : <header>, <nav>, <main> 등 HTML 문서 구조를 형성하는 container 역할의 태그들
2. Semantic Containers for Structure
semantic container : container 역할 + 해당 영역이 담고 있는 콘텐츠의 의미를 반영하고 있는 태그
- 어떤 내용의 콘텐츠를 담고 있는지 함축하고 있는 container 태그를 의미한다.
- 해당 영역의 콘텐츠의 역할이나 중요도에 대한 정보를 제공할 수 있으며, 코드 가독성이 증가한다.
- 기존의 <div> <span> 등의 태그는 문서 영역을 구분하는 container 역할을 하지만 해당 태그 안에 들어가는 콘텐츠가 특별히 정의되어 있지 않은 non-semantic container이다. 콘텐츠를 담고는 있지만, 해당 콘텐츠의 역할이나 중요도에 대한 정보는 제공하지 않는다.
- semantic container for structure 종류
| tag 이름 | 담고 있는 콘텐츠의 특징 |
| <header> | 웹페이지 상단 영역 주로 <hn> elements / branding(로고, 아이콘) / navigational links (탐색 링크, menu button) / 소개용 콘텐츠 / 작성자 정보 등으로 구성 |
| <nav> | set of navigation links, 여러 탐색 링크가 모여있는 영역 |
| <main> | 중심 콘텐츠 (본문) 영역 * 페이지당 하나의 <main> 태그만 있어야 하며, 다른 structure 태그의 하위 태그로 포함될 수 없음 |
| <article> | 웹페이지의 다른 부분로부터 독립적인 자체 콘텐츠 영역 |
| <section> | 유사한 주제의 여러 콘텐츠가 그룹화되어 있는 영역 article과 달리 내용이 다른 영역과 독립적이기보단 그룹을 형성함 |
| <aside> | 중심 콘텐츠와 관련된, 다소 덜 중요한 콘텐츠를 담고 있는 영역 필수적이지 않은 정보를 추가하는 사이드바 형태로 주로 사용됨 |
| <footer> | 웹페이지 하단 영역 주로 연락처 정보 / 저작권, 저자 정보 / 사이트맵 / 사이트 링크 / 관련 문서 등으로 구성 |
Reference
https://www.semrush.com/blog/semantic-html5-guide/
https://www.w3schools.com/html/html5_semantic_elements.asp
'교내 수업 > Media Computation' 카테고리의 다른 글
| [ Week 9 ] Processing User Input (0) | 2024.05.01 |
|---|---|
| [ Week 7 ] JS Arrays and Structured Data (0) | 2024.04.19 |
| [ Week 4 ] Java Programming Essentials (0) | 2024.03.17 |
| [ Week 3 ] Style with CSS (0) | 2024.03.08 |
