Front_end/HTML + CSS

231026 목) Semantic HTML

roofTopCaat 2023. 10. 26. 17:50

 

 

출처 : Semrush.com

시맨틱 HTML 이란

 

시맨틱 HTML은 HTML문서를 작성할 때 다수의 사람이 직관적으로 이해가 가게끔 설정된 명칭의 모임이다

 

 

1. <header> / <nav> navigation

 

header 태그는 웹 페이지의 탑 섹션, 특히 메인 타이틀 / 로고 / 링크 내비게이션등으로 구성되며 웹 페이지에 처음 방문하는 유저들이 페이지의 목적성을 파악할 수 있는 부분이다

 

nav 태그는 주로 웹 페이지 메뉴 항목을 탐색하는 곳에 쓰인다

 

<header>
	<nav>
        <h1>roofTopCaat</h1>
        <p>hello, my name is roofTopCaat</p>

        <ul>
            <li># my github repo</li>
            <li># my tistory blog</li>
            <li># my skill stacks</li>
        </ul>
	</nav>
</header>

 

2. <main>

 

main 태그는 웹 페이지의 주요 내용을 담당한다

 

<main>

    <h2>About my Blog</h2>

    <p>Welcome to my Tistory Blog!</p>
    
</main>

 

3. <article>

 

article 태그는 블로그 포스트, 뉴스 기사, 상품평 등 독립적인 내용을 나타내는 데 사용된다

태그 내의 내용은 독자적이고 의미가 있어야 하며, 제목, 문단, 이미지 및 기타 유형의 내용을 포함할 수 있다

 

<article>

	<h2>How to make a CupCake</h2>
	<p>...</p>
    
</article>

 

4. <aside>

 

aside 태그는 웹페이지의 주요 내용과 관련된 내용을 표시하기 위한 것으로, 부가정보, 광고, 관련기사 등을 포함한다

 

<div>

    <article>
        <h2>Title</h2>
        <p>content</p>
    </article>
    <aside>
    	<h3>Related Articles</h3>
        <ul>
            <li><a herf="#">Article 1</a></li>
            <li><a herf="#">Article 2</a></li>
            <li><a herf="#">Article 3</a></li>
        </ul>
    </aside>
    
</div>

 

5. <section>

 

section 태그는 웹 페이지의 테마에 따른 분류에 사용된다. 긴 호흡의 내용에 들어가는 챕터나 상품 페이지의 분할 등에 사용된다

 

<section>

        <h2>Section Title</h2>
        <p>Section content</p>

</section>

 

6. <footer>

 

footer 태그는 웹페이지의 하단부 영역을 담당한다. copyright / contact us / sns profile link icon 등이 포함된다

 

<footer>

	<p>&copy; 2023 my Tistory Blog</p>

</footer>

 

7. <details> / <summary>

 

토글 섹션(접이식)에서 summary 태그는 제목을, details는 내용을 표시한다

 

<details>

    <summary>Click to expand</summary>
    <p>Content</p>

</details>

 

8. <figure> / <figcaption>

 

figure , figcaption 태그는 웹 페이지의 메인 파트의 콘텐츠를 마킹하는 데 사용된다.

figure 태그는 콘텐츠 자체를 마킹하고, figcaption 태그는 콘텐츠에 대한 캡션 또는 설명을 마킹한다.

 

<figure>

    <img src="image.jpg" alt="Image description" />
    <figcaption>Image caption</figcaption>

</figure>

 

9. <mark>

 

mark 태그는 어떤 이유에 의해 단락에 하이라이트를 부여할 때 사용된다. 검색 결과나 유저에게 보여주고 싶은 부분 등에 해당된다.

 

<p>This part is <mark>highlighted</mark> text.</p>

 

10. <time>

 

time 태그는 날짜나 시간을 표시하는 태그로, 페이지에 있는 검색 엔진이나 기술 내용의 의미를 쉽게 파악할 수 있게 해준다

 

<p>The event will take place on <time datetime="2023-10-26">October 26, 2023</time>.</p>

 

11. <progress>

 

progress 태그는 작업의 진행 상황을 나타내며, 사용자가 진행 상황을 쉽게 이해하게 해준다

 

<progress value="50" max="100"></progress>

 

+a ) <div> / <span>

 

div와 span은 시맨틱 태그가 아니지만  일반적인 내용 영역을 표시하는 데 사용되며, 특정한 의미를 전달하지 않는다.

다른 옵션이 없는 경우에만 이 태그를 사용한다.

 

 

'Front_end > HTML + CSS' 카테고리의 다른 글

231013 금) CSS Media Query  (0) 2023.10.13
231012 목) CSS 포지셔닝  (0) 2023.10.12
231012 목) CSS 선택기 Combining  (0) 2023.10.12
231011 수) CSS Cascade  (0) 2023.10.11
231011 수) CSS Selector  (0) 2023.10.11