231026 목) Semantic HTML

Front_end/HTML + CSS

231026 목) Semantic HTML

roofTopCaat 2023. 10. 26. 17:50

시맨틱 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은 시맨틱 태그가 아니지만 일반적인 내용 영역을 표시하는 데 사용되며, 특정한 의미를 전달하지 않는다.

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