HTML 의미 태그란 무엇입니까? 일반적인 HTML 의미 체계 태그의 전체 목록

<strong>1. HTML 시맨틱 태그란 무엇인가요?

시맨틱 태그는 태그에 고유한 의미를 부여하도록 설계되었습니다.

<p>一行文字</p><span>一行文字</span>

위 코드에서 볼 수 있듯이 <code>p 태그와 <code>span 태그의 차이점 중 하나는 <code>p 태그의 의미가 문단이라는 점입니다. <code>span 태그에는 고유한 의미가 없습니다.

2. 시맨틱 태그의 장점

<li>

코드 구조가 명확하고 읽기 쉬우며 팀 개발에 도움이 됩니다.

<li>

다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)에서 편리하게 파싱하여 웹페이지를 의미론적으로 렌더링합니다.

<li>

검색엔진최적화(SEO)에 좋습니다.

3. 공통 시맨틱 태그

따라서 페이지 구조 작성 시 시맨틱 HTML 태그를 사용하도록 노력해야 합니다

<li>

<code><title>: 페이지의 주요 내용입니다.

<li>

<code><hn>: h1~h6, 계층적 제목, <code><h1>과 <code><title>의 조화는 검색엔진 최적화에 유리합니다.

<li>

<code><ul>: 순서가 지정되지 않은 목록입니다.

<li>

<code><li>: 주문된 목록입니다.

<li>

<code><header>: 헤더에는 일반적으로 웹사이트 로고, 기본 탐색, 사이트 전체 링크 및 검색 상자가 포함됩니다.

<li>

<code><nav>: 탐색 표시, 문서의 중요한 링크 그룹에만 사용됩니다.

<li>

<code><main>: 페이지의 주요 콘텐츠로, 페이지에서 한 번만 사용할 수 있습니다. 웹 애플리케이션인 경우 주요 기능을 둘러싸세요.

<li>

<code><article>: 문서의 나머지 부분과 독립적인 외부 콘텐츠를 정의합니다.

<li>

<code><section>: 문서 내 섹션(섹션, 섹션)을 정의합니다. 장, 머리글, 바닥글 또는 문서의 기타 부분 등입니다.

<li>

<code><aside>: 포함된 콘텐츠 이상의 콘텐츠를 정의합니다. 사이드바, 기사 링크 세트, 광고, 친숙한 링크, 관련 제품 목록 등.

<li>

<code><footer>: 바닥글, 상위 항목이 본문인 경우에만 전체 페이지의 바닥글입니다.

<li>

<code><small>: 작은 글꼴 효과 표시, 세부정보 지정, 면책조항, 주석, 서명, 저작권 입력.

<li>

<code><strong>: <code>em 태그와 마찬가지로 텍스트를 강조하는데 사용되지만, 텍스트를 더욱 강하게 강조합니다.

<li>

<code><em> : 강조된 내용으로 본문을 이탤릭체로 표현합니다.

<li>

<code><mark>: 노란색을 사용하여 텍스트의 일부를 강조 표시합니다.

<li>

<code><figure>: 독립적인 흐름 콘텐츠(이미지, 차트, 사진, 코드 등)를 지정합니다(기본 여백은 약 40px).

<li>

<code><figcaption>: <code>figure 요소의 첫 번째 또는 마지막 하위 요소 위치에 배치되어야 하는 <code>figure 요소의 제목을 정의합니다.

<li>

<code><cite>: 포함된 텍스트가 책이나 잡지 제목과 같은 참조를 참조함을 나타냅니다.

<li>

<code><blockquoto>: 자체 공간이 있는 블록 참조를 정의합니다.

<li>

<code><q>: 짧은 인용(브라우저 간 문제, 사용하지 마세요).

<li>

<code><time>: 날짜/시간 속성은 특정 형식을 따릅니다. 이 속성이 무시되는 경우 텍스트 콘텐츠는 합법적인 날짜 또는 시간 형식이어야 합니다.

<li>

<code><abbr>: 약어 또는 약어.

<li>

<code><dfn>: 정의 용어 요소. 정의 바로 옆에 있어야 하며 설명 목록 dl 요소에 사용할 수 있습니다.

<li>

<code><address>: 저자, 관련자 또는 단체의 연락처 정보(이메일 주소, 연락처 페이지 링크)입니다.

<li>

<code><del>: 콘텐츠가 삭제되었습니다.

<li>

<code><ins>: 콘텐츠가 추가되었습니다.

<li>

<code><code>: 태그 코드입니다.

<li>

<code><meter>: 알려진 범위 또는 분수 값 내에서 스칼라 측정값을 정의합니다. (Internet Explorer에서는 미터 태그를 지원하지 않습니다.)

<li>

<code><progress>: 실행 중인 진행률(프로세스)을 정의합니다.

더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼

을 방문하세요.