티스토리 뷰
프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타내며 채워질 '데이터'를 나타내도록 코딩해야 합니다.
이게 어떻게 시각적으로 보여질까? 보다는 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇일까요?를 들 수 있습니다.
어떻게 보여져야만 하는가는 CSS만의 단독 역할입니다.
< 시멘틱 마크업의 장점 >
- 웹접근성에 효율적 - 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 사용할 수 있습니다.
- 코드 가독성 상승 - 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
- 검색엔진 최적화(SEO)에 유리 - 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주합니다
< 시멘틱 마크업의 종류 >
| <html> | HTML 문서의 루트(최상위 요소)를 나타내므로 root 요소라고도 합니다. 다른 모든 요소는 이 요소의 자손이어야 합니다. |
| <base> | 문서의 모든 상대 URL에 사용할 기본 URL을 지정합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. |
| <head> | 제목, 스크립트 및 스타일 시트와 같은 문서에 대한 기계 판독 가능 정보(메타데이터)를 포함합니다. |
| <link> | 현재 문서와 외부 리소스 간의 관계를 지정합니다. 이 요소는 CSS에 연결하는 데 가장 일반적으로 사용되지만 무엇보다도 사이트 아이콘("favicon" 스타일 아이콘과 홈 화면용 아이콘 및 모바일 장치의 앱)을 설정하는 데도 사용됩니다. |
| <meta> | <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다. |
| <style> | 문서 또는 문서의 일부에 대한 스타일 정보를 포함합니다. 이 요소를 포함하는 문서의 내용에 적용되는 CSS를 포함합니다 |
| <title> | browser의 제목 표시줄 또는 페이지의 탭에 표시되는 문서의 제목을 정의합니다. 텍스트만 포함합니다. 요소 내의 태그는 무시됩니다. |
| <body> | HTML 문서의 내용을 나타냅니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. |
| <address> | 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다. |
| <article> | 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다. |
| <aside> | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다. |
| <footer> | 가장 가까운 섹션 콘텐츠나 섹션 루트의 푸터를 나타냅니다. 푸터는 일반적으로 섹션의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다. |
| <header> | 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다. |
| <h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다. |
| <main> | 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. |
| <nav> | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다. |
| <section> | HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아닙니다. |
더 많은 마크업 코드 알아보기 : https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에
developer.mozilla.org
'공부' 카테고리의 다른 글
| CSS Normalize vs CSS Reset (0) | 2024.03.28 |
|---|---|
| display 속성에 대하여 (0) | 2024.03.28 |
| loding dot button (0) | 2023.03.23 |
| checkbox custom (0) | 2023.03.08 |
| toast notification (0) | 2023.03.08 |