[HTML] 그룹화 | 시맨틱 마크업 | 시맨틱 요소

구조화

header에는 제목이 있어야 한다. 

    <header>
      <h1>📘 The Code Magazine</h1>

      <nav>
        <a href="blog.html">Blog</a>
        <a href="challenges.html">Challenges</a>
        <a href="flexbox.html">Flexbox</a>
        <a href="css_grid.html">CSS Grid</a>
      </nav>
    </header>

header가 있어야 나머지 콘텐츠가 나올 수 있다. 

 

 

  <footer>Copyright &copy; 2027 by The Code Magazine</footer>

웹 페이지 마지막 즉 바닥글에 footer를 추가할 수 있다. 

 

    <a href="blog.html">Blog</a>
    <a href="challenges.html">Challenges</a>
    <a href="flexbox.html">Flexbox</a>
    <a href="css_grid.html">CSS Grid</a>

 

서로 구별된, 그룹화가 안된것을 그룹화하겠다. 어떻게? 일부 컨테이너 요소를 사용해서 말이다. 

 

nav를 사용할 것이다. nav는 navigation의 약자이다. 

    <nav>
      <a href="blog.html">Blog</a>
      <a href="challenges.html">Challenges</a>
      <a href="flexbox.html">Flexbox</a>
      <a href="css_grid.html">CSS Grid</a>
    </nav>

nav를 사용하여 네 개의 링크는 그룹화가 되었다. nav에 따라 탐색인 이 상위 요소로 이동한다. 이제 문제는 페이지를 업데이트할 때 마다 정확하게 동일하게 보인다. 코드소스에서 보이는 것들은 기본적으로 보이지 않는 상자처럼 만들어졌다. 따라서 요소 자체는 아무런 작업을 수행하지 않는다. 모든 것은 요소를 함게 그룹화한다는 것이다.  

(nav말고 div를 사용할 수 있다. 시멘틱 개념이 들어가면 div를 사용해야한다. div를 사용한다고 해서 시각적으로 바뀌는 것은 없다. 특정 컨테이너에 어떤 의미를 부여하고 싶지 않을 때 div요소를 사용한다. 즉 특정 상자 요소와 같다. )

 

aside →

여백요소이다. 

보완하는 일부 보조 정보, 페이지의 주요 부분에 있는 정보이다.

---

시맨틱 마크업 (Semantic Markup) 

시멘틱 html이란 무엇을 의미할까?

html에서 의미 체계에 대해 이야기할때 우리가 의미하는 것은 특정 요소가 실제로 의미나 목적이 붙어있다. 따라서 특정 html 요소에 대해 생각할때 우리는 실제로 생각하지 말아야 그 요소가 어떻게 생겼는지에 대해 페이지에 렌더링 되는 대로 

그것이 의미하는지, 해당 요소가 실제로 무엇을 의미하는지에 대해 생각해야 한다. 시멘틱 html 의 정이라고 할 수 있다. 

시멘틱? '관련된'이라는 의미

시멘틱 마크업? 의미있는 마크업, 요소의 내용의 의미에 관련된 마크업

 

1. 크롤러가 더 쉽게 알아보도록 다른 어플리케이션 또는 코드와 더 융합하도록 하기 위함

2. 접근성 

    스크린 리더를 쓰는 사람들이 코드에 더쉽게 접근하기 위해서이다.

    렌더링된 내용을 못보는 사람들은 스크린 리더를 사용한다.

    스크린 리더는 nav 요소나 머리말, 꼬리말, article, main, section 등을 착고 그것들을 hook으로 사용한다.

3. 코드나 마크업을 우리들이 쉽게 읽을 수 있다.

 

즉, 시멘틱 마크업을 생성하는 이유는 마크업에 의미를 부여하기 이ㅜ함

 

크롤링 프로그램은 주로 nav 바에 있는 모든 링크나 꼬릿말의 링크를 찾아서 그것들을 수집한 후 그 페이지를 방문하고 그 과정을 계속 반복하는 전략을 사용

 

 시맨틱 요소 

div나 제네릭 컨테이너 대신 사용할 수 있는 요소들

 

<main> 요소? 문서의 주요 내용을 나타낸다.

페이지 전반에서 계속 반복되는 내용은 전부 제외한다.

여러 페이지에 반복되는 것은 메인 콘텐츠에 포함시키지 않는다.

 

<nav> 요소? 페이지에서 내비게이션 링크를 제공하는 것들

다른 사이트로 이동하는 링크가 아니라 페이지 내에서 다른 곳으로 이동

 

<section> 요소? 웹 사이트나 애플리케이션의 독립적인 부분을 나타낼 때

<nav> 대신 <section>을 사용할 수 있다.

 

<div> 요소? 그냥 제네릭 컨테이너, 아무곳에서 사용할 수 있다.

 

<article> 요소? 문서 내 독립적인 구성을 나타낸다. 

내용을 그룹으로 묶을 대 쓰는 또 다른 요소

article은 블로그 게시물의 경우 기사 요소이다. 이것은 또다른 컨테이너 요소이다.

    맥락에서 기사는 실제로 단순히 의미하는 것이 아니다. 컴퓨터가 쓴 기사, 펜, 전화 이것들은 기사이다.

  어떻게든 컴퓨터를 HTML로 표현한다면 그것은 좋은 요소가 될것이다.

 

<aside> 요소? 

 

머리말 요소

보통 내용을 소개

 

꼬리말 요소

 

<datetime>?

 

<figure> 요소? 독립적인 내용을 나타내는데 보통 캡션이 달린 경우

 

시멘틱이 중요한 이유?

• 검색 엔진 최적화 
• 접근성 - 웹 페이지를 이용하기 위해 스크린 리더를 사용하는 사람들에게 중요