HTML Semantic Tag

Notice

안녕하세요

Recent Posts

Recent Comments

Link

GitHub

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

파카

HTML Semantic Tag 본문

프로그래밍/HTML&CSS

HTML Semantic Tag

Anphaca 2021. 11. 2. 15:58

확실히 HTML과 CSS의 정리가 필요하다.

HTML 과 CSS는 쉬워보이면서 참고없이 하기가 쉽지 않고

그저 따라치거나 유튜브를 보다보면 나도 저정도는 ?하고 착각에 빠지기 쉬운거 같다.

더군다나 개인적으로 미적감각이 없다고 생각하다보니 잘 실습하지 않았던거 같다.

그래서 당분간 계속해서 정리해보려고 한다.

그러기에 앞서서 Semantic Tag에 대해 알아볼 필요가 있다.

Semantic Tag : 의미가 있는 태그라는 뜻이다.

중요하다고 하는데 크게 인식을 못하다가 역시나 내가 잘 사용하지 못해서 검색해보았다.

각 태그들에는 의미가 있다.

<header> : this element is used to specify the header for a web document or the header for a section of a web document. Headers usually contain a group of introductory content e.g. navigation aids, headings, logos etc.
<nav> : this element is used to enclose navigational links within a web document or to other resources.
<aside> : this element is used to represent a section of a web document with content that is indirectly related to the document’s main content.
<article> : this element is used to represent content that is independent, self-contained and reusable.
<section> : this element is used to define a section of standalone content within a web document. Sections can contain content as well as other HTML elements that add meaning to the content.
<h1> — <h6>: these elements are used to represent headings of different levels within a web document. <h1> is used to represent the heading at the highest level, while <h6> is used to represent headings at the lowest level.
<p> : this element is used to define a paragraph.
<button> : this element is used to define a clickable button.
<cite> : this element is used to provide a reference to the title of a piece of cited work.
<em> : this element is used to stress the emphasis of text within a web document.
<footer> : this element is used to provide a footer to its nearest section, or the web document as a whole. Information likely to be found in a footer include information about the author, copyright information and contact information.

이 의미에 따라 구조를 잘 짜놓아야 이후에 내 코드를 내가 볼때도 편하고 남이 볼 때도 편하다.

기본적으로 내가 생각하는 선에서 생각을 정리해나가보려고 한다.

<Body>는 당연하게도 Sectioning root, 이곳에서 구역을 나누면 된다.

처음 예제로 배우게 되는 <h1> 부터 <h6>는 section headings 으로 표제 태그이다.

숫자에 상관없이 가장 중요한 단일 표제를 나타내는 데 사용해야 한다.

MDN에서 볼 때

각 태그들을 Content sectioning, Text content, Inline text semantics, froms.. 등 구분을 해놓았다.

요소의 큰 틀을 이해해야 할 듯 싶다.

내가 찾은 글에서는 아래와 같이 팁을 통해 설명해주고 있다.

의식하면서 코딩해야 한다.

The difference in structure between a semantically structured web page and non-semantically structured web page.

Semantic HTML Tips

The following are tips associated with writing semantic HTML:

Separate content from presentation: HTML is meant to be used only for the definition of structure and provision of meaning to the contents of web documents. Therefore the choice of HTML elements to be used in creating web documents should be based solely on their semantic meaning and not their style of presentation. CSS, not HTML, should be used to provide a visual style.
화면에서 컨텐츠를 분리하라: 요약하면 HTML은 구조다.
그렇기에 HTML의 각 요소를 의미에 맞게 작성하고 꾸미는 건 CSS에서 하라.
Use container elements for layout: although visually amazing websites can be created using only <div> or <span> elements styled with CSS, these elements have no semantic meaning and no default accessibility features. Therefore they should only be used as containers to group other elements for layout purposes.
컨테이너 요소를 레이아웃을 위해 사용해라
div, 또는 span은 의미가 없기때문에 다른 요소를 그룹핑하는데 사용해라
Do not reinvent the wheel: before using CSS style classes such as ‘nav’, ‘header’, ‘footer ’ on <div> elements to present specific types of content, ensure that there are not any existing semantic HTML elements that are more suitable for your use case.
어떠한 콘텐츠를 만들때 목적에 맞는 의미를 가진 시맨틱 태그가 없는지 찾아봐라
(div 내에 nav, header, footer 등을 쓰기전에)