Semantic tag

김민성·2023년 6월 29일
html

Semantic?

In programming, Semantics refers to the meaning of a piece of code

semantic의 의미 그대로 프로그래밍에서도 code 조각의 의미를 뜻합니다.
코드 조각의 의미는 태그가 지니고 있는 컨텐츠의 의미라고 생각하시면 됩니다.
semantic tag가 있다면 의미없는 태그가 있다는 소리일까요?

non-semantic tags

div 와 span이 대표적인 예로서 이 태그들은 컨텐츠에 대해서 아무것도 말해주지 않습니다.
html4 이전에는 위 태그들에 id 나 class 속성을 부여하여 의미를 부여하였으나 HTML5부터 시멘틱 태그가 등장하였습니다.

Semantics in HTML

HTML should be coded to represent the data that will be populated and not based on its default presentation styling.

When approaching which markup to use, ask yourself, "What element(s) best describe/ represent the data that I'm going to populate?"

Benefits from writing semantic markup

Search engines will consider its contents as important keywords to influence the page's search rankings

검색엔진에 상위 노출되기 위해 중요한 요소입니다. (검색하는 사용자들과 소통에 도움이 됩니다.)

Screen readers can use it as a signpost to help visually impaired users nevigate a page

스크린 리더의 이정표로 사용되기에 중요합니다. (읽기 어려운 분들과 소통에 도움이 됩니다.)

Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes

div로만 이루어져있는 것보다 의미있는 코드를 찾기 쉽습니다. (개발자간의 소통에 도움이 됩니다)

Suggests to the developer the type of data that will be populated

개발자에게 어떤 데이터가 입력되어야 할 지 제안합니다. (컴퓨터와 소통하는 데 도움이 됩니다.)

Semantic naming mirrors proper custom element/component naming

Semantic elements

100여개가 넘는 semantic elements 중 몇개만 소개해보겠습니다.

<article>

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable

<article> 태그는 독자적으로 정보를 구성할 수 있는 글에 사용됩니다.

사용예시

  • a forum post
  • a magazine or newspaper article
  • a blog entry
  • a product card
  • a user-submitted comment
  • an interactive widget or gadget
  • any other independent item of content

참고사항

  • 개별 <article>은 식별되어야하므로 heading(h1~h6)를 자식으로 가져야합니다.
  • <article>이 중첩된다면, 내부 요소는 외부 요소와 관련있어야 합니다.

<aside>

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes

<aside> 태그는 메인 콘텐츠와 간접적으로 연관된 정보를 나타낼때 사용됩니다. 고로 사이드바처럼 옆으로 빠져있는 경우가 대다수입니다.

참고사항

<aside> 태그를 글을 강조하는 목적으로 사용하지 마십시오. <aside>는 비간접적으로 연관된 요소에 사용되기에 강조될 이유가 없습니다.

<details>

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided usting the <summary> element.

The contents of the <summary> element are used as the label for the disclosure widget.

<summary>

The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box.

A <summary> element may only be used as the first child of a <details> element.

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

<figcaption>

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.

부모 요소인 <figure>를 설명하는 목적으로 사용됩니다.

<figure>

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

<figure> 요소는 독립적인 컨텐츠를 나타낼 때 사용됩니다. 부모요소인 <figure>과 자식요소인 contents, <figcaption>은 단일 유닛으로 참조됩니다.(어디에 참조되는 걸까?)

참고사항

Usually a <figure> is an image, illustration, diagram, code snippet, etc.

<figcaption>이 여러 개라면 첫 번째 <figcaption> 이 figure의 caption으로 표시됩니다.

<form>

The <form> HTML element represents a document section containing interactive controls for submitting information.

<form> 요소는 정보 제출과 관련된 상호작용이 포함된 문서 섹션을 표현합니다.

The <footer> HTML element represents a footer for its nearest ancestor secioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.

사용예시

  • section의 저자
  • 저작권관련 자료 in an <address> element.
  • 연관된 document로의 링크

참고사항

  • 가장 가까운 섹션 컨텐츠나 섹션의 루트 요소가 <body>라면 <footer>는 전체 페이지에 적용됩니다.
  • <footer> 요소는 섹션 컨텐츠가 아니므로 새로운 섹션이 포함되지 않습니다.

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

사용예시

<header>가 사용되는 예시는 2가지 경우가 있습니다.

  1. Page Header

    The <header> element defines a banner landmark when its context is the <body> element.

  2. Article Header

    The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.

<main>

The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

<main> HTML 요소는 <body> 의 주요한 컨텐츠를 표현합니다. 이에 대비되는 semantic element는 <aside>로 보면 될 듯합니다.

A document mustn't have more than one <main> element that doesn't have the hidden attribute specified.

페이지에 보여지는 <main> 요소는 단 하나만 존재해야 합니다. (숨겨져 있는 것은 가능한 듯 합니다)

<main> doesn't contribute to the document's outline; ...
<main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.

<main> HTML element가 DOM's concept에 영향을 끼치지 않는 것에 대해서는 DOM을 공부하면서 다시 알아봐야겠습니다. 지금은 정보전달 목적이라는 것 외에는 잘 모르겠습니다.

<mark>

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.

참고사항

  1. Marking text of interest
    인용문을 작성할 때 original source에서는 알 수 없지만 본인이 생각하기에 관련되어 있다고 생각되는 부분에 사용합니다.
  2. Identifying context=sensitive passage
    사용자의 현재 행동과 연관된 컨텐츠의 부분에 표기합니다. 예를 들면 검색한 단어를 mark하는 것입니다.
  3. <mark>를 강조하는 문법으로 사용하지 마십시오.

<mark> vs. <strong>

<mark> is used to denote content which has a degree of relevance,
while <strong> indicates spans of text of importance

<mark>는 컨텐츠의 관련성을 나타내는 반면에 <strong>은 텍스트의 중요성을 나타냅니다.

Accessibility

<mark> 요소는 대부분의 스크린 리더 기술에 의해 읽혀지지 않습니다. CSS content property를 pseudo-elements(::before, ::after)와 함께 사용하면 읽히지만, 글을 이해하는 데 오히려 악영향을 끼칠수 있어서 남용하지 않는 것을 추천합니다.

The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

사용예시

  • menus
  • tables of contents
  • indexs

참고사항

  1. 모든 링크들이 <nav> element에 포함되는 것은 아닙니다 (반례: <footer>)
  2. 페이지 내에 여러개의 <nav>가 존재할 수 있습니다. 접근성 향상을 위해 aria-labelledby 속성이 사용되며 이를 스크린 리더가 참고합니다.

    A document may have several <nav> elements, for example, one for site navigation and one for intra-page navigation. aria-labelledby can be used in such case to promote accessibility.

  3. User agent는 <nav>를 참고하여 navigation-only content의 초기 렌더링을 생략할 지 결정할 수 있습니다.

<section>

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions

<section> HTML 요소는 더 구체적인 semantic 요소로 표현할 수 없는 독립적인 섹션을 나타내는데 사용됩니다.
<section>은 반드시 heading을 자식요소로 갖습니다.
heading을 갖지 않는 <section>은 스크린 리더에 읽힐 필요가 없다고 판단되는 부분 뿐입니다.

more specific semantic element?

If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as standalone piece (e.g. a blog post or blog comment, or a newspaper article), the <article> element would be a better choice

If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an <aside>

If the contents represent the main content area of a document, use <main>.

If you are only using the element as a styling wrapper, use a <div> instead.

<time>

The <time> HTML element represents a specific period in time.

사용예시

  1. A time on a 24-hour clock.
  2. A precise date in the Gregorian calendar (with optional time and timezone information)
  3. A valid time duration

참고사항

This element is for presenting dates and times in a machine-readable format.

This element should not be used for dates prior to the introduction of the Gregorian calendar (due to complications in calculating those dates)

The datetime value (the machine-readable value of the datetime) is the value of the element's datetime attribute, which must be in the proper format. If the element doen not have a datetime attribute, it must not have any element descendants, and the datetime value is the element's child text content.

기계가 읽을 수 있는 형식을 지켜야 합니다.
기계가 인식하지 못하는 gregorian calendar 이전의 dates는 사용되지 못합니다.
datetime 속성을 사용하는 것이 best이며, 만약 사용되지 않았다면 <time>의 자식요소는 없어야 하며 text content가 datetime value로 인식됩니다.(형식을 지켜야 합니다)

느낀점

Semantic HTML element는 의미를 소통하기 위해 존재한다고 생각합니다.
특히 Screen reader를 사용하는 분들의 접근성을 향상시킨다는 점에서 사용법에 맞게 사용해야 할 듯 합니다.
추후에 Semantic 요소들을 더 알게 되면 계속 추가해나가겠습니다.

참고사이트

profile
김민성
'WHY'를 묻고 reason을 공부하는 개발외ㅓ인
이전 포스트

CSS 방법론(OOCSS, BEM, SMACSS)

다음 포스트

반응형 디자인

0개의 댓글