成都建設(shè)企業(yè)網(wǎng)站

2022-07-03 分類：網(wǎng)站建設(shè)

成都建設(shè)企業(yè)網(wǎng)站正確的HTML5語義探究如果您仔細(xì)計劃HTML文檔的結(jié)構(gòu)，則可以幫助計算機理解內(nèi)容的含義。正確的語法肯定很重要，但是它基本上只是為解析器，搜索引擎和輔助技術(shù)提供了毫無意義的數(shù)據(jù)。

如果您通過關(guān)注語義來改進前端工作流，則可以創(chuàng)建吸引更多訪問者的更高質(zhì)量的內(nèi)容。語義學(xué)是對意義的研究，從廣義上講，它是邏輯學(xué)和語言學(xué)的一個分支。

在Web開發(fā)領(lǐng)域中，當(dāng)計算機了解文檔的結(jié)構(gòu)及其內(nèi)部元素的作用時，我們談?wù)摰氖钦Z義內(nèi)容。如果我們要建立正確的語義，我們需要深刻理解結(jié)構(gòu)我們的內(nèi)容和功能的前端技術(shù)。

那么有什么實際的好處呢？正確的語義意味著更可搜索的內(nèi)容，從而導(dǎo)致更好的搜索引擎排名。我們還增加了可訪問性，因為諸如屏幕閱讀器之類的輔助技術(shù)可以更好地解釋我們內(nèi)容的含義。

有許多不同的前端開發(fā)技術(shù)，使開發(fā)人員可以實現(xiàn)語義頁面結(jié)構(gòu)。這篇文章將為您簡要介紹語義HTML標(biāo)簽和文檔大綱的概念。

如何使用HTML插槽自動生成目錄

目錄可以極大地改善許多網(wǎng)站的用戶體驗，例如文檔站點或在線...

語義和非語義HTML標(biāo)簽

語義的概念并不像它看起來的那么新，它早在HTML5時代就已存在。術(shù)語語義網(wǎng)最早是由Tim Berners-Lee爵士在2001年提出的。在“語義網(wǎng)”下，他表示可以由機器處理的數(shù)據(jù)網(wǎng)。

這首先意味著單獨的HTML元素需要具有其可區(qū)分的結(jié)構(gòu)角色。根據(jù)W3C的定義， “語義元素向瀏覽器和開發(fā)人員都清楚地描述了其含義”。

HTML5之前的語義元素

成都建設(shè)企業(yè)網(wǎng)站語義元素也在HTML5之前存在，只是在大多數(shù)情況下，開發(fā)人員并不知道他們使用的某些標(biāo)記實際上是語義的。只需考慮或標(biāo)簽即可。

對于我們和用戶代理，他們的角色都很清楚：只包含一個表單，就像包含一個圖像一樣。沒有人會在里面放置桌子或標(biāo)題并標(biāo)記（或至少希望如此）。

的元素，和其相關(guān)的標(biāo)記，如表中的行，表格單元格等也都是HTML5之前存在的語義標(biāo)簽，但是由于這是大量使用了很多年的基于表的布局，大部分開發(fā)商并沒有利用他們在語義方式。這導(dǎo)致網(wǎng)絡(luò)犧牲了布局的邏輯結(jié)構(gòu)。

有序列表和無序列表，段落，h1-h6標(biāo)題標(biāo)記都是HTML5之前的所有語義元素。

非語義元素

非語義元素沒有任何特殊含義，它們之間的層次關(guān)系只是虛幻的。非語義HTML標(biāo)簽最廣泛使用的示例是和標(biāo)簽。

如果您的網(wǎng)站曾經(jīng)感染過可怕的神經(jīng)病，您就會知道我在說什么。是的 Divs不一定是錯誤的，但是如果我們想編寫可維護的，模塊化的和有意義的HTML代碼，就必須格外注意。

對抗神itis

Smashing Magazine精美地解釋了標(biāo)簽過度和不合理使用的真正問題是什么

。要點是，如果我們在div內(nèi)包含div，則似乎外部div將是內(nèi)部div的父元素，而實際上并非如此。

成都建設(shè)企業(yè)網(wǎng)站兩者之間沒有關(guān)系，就像代碼在內(nèi)聯(lián)級別上以相同方式工作一樣。

但是，如果您仍然對

-s和

-s 依附，不要驚慌，因為您不必完全拋棄它們。它們?nèi)匀皇莾H出于樣式目的以及在其他不得已的情況下對內(nèi)容進行分組的選擇。

HTML5中的文本語義

HTML5引入了許多新的語義元素，使內(nèi)容的組織變得容易。它們不僅幫助您在整個文檔級別上組織內(nèi)容（請參閱下一節(jié)中的詳細(xì)信息），而且還可以在文本塊內(nèi)將它們作為內(nèi)聯(lián)標(biāo)簽。

可能最流行的文本級語義標(biāo)記是和，但它們也早于HTML5才存在。在新的內(nèi)聯(lián)語義元素，我們可以找到例如,用于標(biāo)記人類可讀的日期時間，并為突出顯示的文本。

請參閱此列表以獲取當(dāng)前正在使用的所有文本級語義元素。

HTML5中的文檔大綱

文檔大綱是HTML文檔的結(jié)構(gòu)。它顯示了元素如何相互關(guān)聯(lián)。僅通過映射元素（例如標(biāo)題，表標(biāo)題，表單標(biāo)題以及早期版本的HTML（例如HTML4.01和XHTML）中的其他元素）生成文檔大綱。

在HTML5中，概述算法已通過新的sectioning元素得到增強，即：

對于圍繞特定主題分組的部分

用于完整或獨立的作品，例如博客文章或小部件

用于導(dǎo)航塊

用于補充內(nèi)容，例如側(cè)邊欄。

HTML5中有第五個sectioning元素，但這不是新的，而是標(biāo)簽。在和標(biāo)簽也是新的，但他們沒有在文檔中產(chǎn)生新的章節(jié)，他們瓜分了里面部分的內(nèi)容。這意味著每個sectioning元素（body，article，section，nav和aside）都可以具有自己的header和footer。

成都建設(shè)企業(yè)網(wǎng)站語義結(jié)構(gòu)化內(nèi)容的提示

如果要創(chuàng)建結(jié)構(gòu)合理的文檔大綱，則需要注意以下規(guī)則：

1.最外面的section元素始終是標(biāo)簽。

2. HTML5中的部分可以嵌套。

3.每個部分都有自己的標(biāo)題層次結(jié)構(gòu)。他們每個人（甚至是最里面的嵌套部分）都可以有一個h1標(biāo)簽。

4.雖然文檔大綱主要由5個分節(jié)元素定義，但每個節(jié)也需要適當(dāng)?shù)臉?biāo)題。

5.始終是定義給定節(jié)標(biāo)題的第一個標(biāo)題元素（讓它為h1或較低等級的標(biāo)題標(biāo)簽）。同一部分中的以下標(biāo)題標(biāo)記需要與此相關(guān)。（如果第一個標(biāo)題是sectioning元素內(nèi)的h4，則不要在其后放置h4。）

6.用和定義的部分不屬于HTML文檔的主要輪廓，通常它們最初并不是由輔助技術(shù)來呈現(xiàn)的。

7.每個部分（正文，部分，文章，旁邊，導(dǎo)航）可以有自己的和標(biāo)簽，用于定義頁眉（例如徽標(biāo)，作者的姓名，日期，元信息等）和頁腳（版權(quán)，注釋，鏈接等）。

示例：語義大綱

讓我們看一個語義文檔大綱的示例，以更清楚地了解其工作方式。我們的示例代碼將導(dǎo)致以下文檔結(jié)構(gòu)：

文檔大綱示例

這是帶有適當(dāng)語義部分的代碼：

1個

Welcome On Our Website!

Here is our logo and slogan.

Choose Your Interest

Menu 1

Menu 2

Menu 3

Title of Article

Subtitle of Article

First Logical Part (e.g. "Theory")

Paragraph 1 in first section

Some Other Subheading in First Section

Paragraph 2 in first section

Second Logical Part (e.g. "Practice")

Paragraph 1 in second section

Paragraph 2 in second section

Author Bio

Paragraph in Article's Footer

Get To Know Us Better