html5 태그 의미론이란 무엇입니까?

HTML5에서 태그 의미론은 태그와 속성의 용도와 기능을 보다 직관적으로 이해할 수 있는 능력을 말하며, 태그 의미론은 사용자가 더 쉽게 읽을 수 있고, 스타일이 손실되면 페이지가 명확한 구조를 가질 수 있습니다. 개발 및 유지 관리에 도움이 되는 일반적인 의미 태그에는 "

", "

", "

" 등이 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5 태그 시맨틱이란 무엇인가요?

시맨틱 태그의 도입은 이름에서 알 수 있듯이 전체 화면 div 레이아웃에 대한 좋은 솔루션으로 사람들이 각 태그의 역할과 의미를 한눈에 볼 수 있도록 해줍니다. 적절한 의미를 지닌 태그를 사용하여 페이지의 구조를 좋게 하고 페이지 요소에 의미를 부여하며 검색 엔진에서 쉽게 이해할 수 있도록 합니다. 그림은 시맨틱 태그의 역할을 명확하게 보여줄 수 있는데, 이는 전체를 하나씩 구성하는 것과 같은 느낌입니다.

"의미론적": 인간의 개입을 줄이면서 정보를 조사하고 수집하는 기계의 능력을 말하며 기계가 웹 페이지를 이해할 수 있도록 하면 궁극적으로 우리에게 도움이 됩니다.

HTML 태그 의미: 태그(markup)와 속성(attribute)의 목적과 기능을 누구나 직관적으로 이해할 수 있도록 해줍니다.

1. Hx 시리즈는 굵은 글꼴과 큰 글꼴 크기를 가지고 있기 때문에 제목과 많이 비슷해 보이는 것은 당연합니다.

2. ,은 톤을 강화하는 데 사용됩니다.

3. 콘텐츠의 구조(콘텐츠 의미론)에 따라 적절한 태그(코드 의미론)를 선택하여 개발자가 읽기 쉽도록 하고, 크롤러와 브라우저가 잘 파싱할 수 있도록 하면서 더욱 우아한 코드를 작성합니다.

다음은 일반적인 시맨틱 태그와 해당 기능입니다.

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 
<title>           <!--：页面主体内容。-->
<hn>             <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->
<small>         <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>        <!--：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。-->
<cite>           <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>                <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>           <!--：datetime属性遵循特定格式，文本必须是合法的时间格式。-->
<abbr>          <!--：简称或缩写。-->
<dfn>             <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>     <!--：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>             <!--：移除的内容。-->
<ins>             <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

시맨틱의 장점을 요약합니다.

사용자가 읽기 쉽고 스타일이 손실되었을 때 페이지에 명확한 구조를 제공할 수 있습니다.

SEO에 좋은 검색 엔진은 태그를 기반으로 개별 키워드의 맥락과 가중치를 결정합니다.

시맨틱을 기반으로 웹 페이지를 렌더링하는 시각 장애인과 같은 다른 장치에서 구문 분석하기 편리합니다.

개발 및 유지 관리에 도움이 되며, 의미가 더 읽기 쉽고, 코드가 더 잘 유지되며, CSS3과의 관계가 더 조화롭습니다.

(학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)

위 내용은 html5 태그 의미론이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!