HTML5網站的正確標記？

我在HTML5/CSS3中開發我的新網站。將我的PSD文件轉換爲HTML5/CSS3時，我想知道HTML5網站的正確標記。HTML5網站的正確標記？

下面是我的網站的一個簡單的線框，正如你所看到的，我希望網站至少在不同的區域能夠製作完整的寬度。

這是佈局：

正如你可以看到這裏，我想對我的主頁的信息，一些不同的部分。

As you can see here, I want to have some different section on my homepage for the information

我想出了這個標記：

因爲當我複製所有的列表中不再可見，我省略了內容，文字和圖片在此代碼。如果圖像或文字會在下面留下評論。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title></title> 

<!-- Meta Tags --> 

<!-- Stylesheets --> 
<link href="css/style.css" rel="stylesheet"> 
<link href="css/960.css" rel="stylesheet"> 

<!-- Icons --> 
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png"> 

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

</head> 

<body> 

<!-- Start container website --> 
<header id="header"> 
    <div class="container_12"> 
      <div class="grid_12"> 

<!-- // Here will be position the logo with a link \\ --> 

       <nav id="primary-navwrapper"> 
       <!-- // Here will be an unordered list with menu items \\ --> 

      </nav> 

     </div><!-- End .grid_12 --> 

    <div class="clear"></div><!-- End .clear --> 
    </div><!-- End .container_12 --> 
</header><!-- End header --> 

<section id="hero"> 
    <div class="sliderbox"> 

     <!-- // An list of image for a slider \\ --> 

    </div><!-- End .sliderbox --> 

</section><!-- End section#hero --> 

<section id="introduce"> 
    <article class="container_12"> 

      <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ --> 

      <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ --> 

      <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ --> 


    </article><!-- End article.container_12 --> 


    <article class="container_12"> 
     <div class="grid_12"> 

      <!-- // A image tag \\ --> 

     </div><!-- End .grid_12 --> 

    </article><!-- End article.container_12 --> 

</section><!-- End section#introduce --> 

<hr class="dark-grey"> <!-- Divider for the section --> 

<section id="work" class="alt"> 
    <article class="container_12"> 

      <!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ --> 

    </article><!-- End article.container_12 --> 

</section><!-- End section#work.alt --> 

<hr> <!-- Divider for the section --> 

<section id="blog" class="even"> 
    <article class="container_12"> 
     <aside class="grid_4"> 

      <!-- Sidebar with some text --> 

     </aside><!-- End aside.grid_4 --> 

     <ul class="recentbox"> 

      <!-- List of 2 latest blog items --> 

     </ul><!-- End ul.recentbox --> 

    </article><!-- End article.container_12 --> 

    <article class="container_12"> 
     <div class="grid_12"> 

      <!-- Contact banner --> 

     </div><!-- End .grid_12 --> 
    </article><!-- End article.container_12 --> 

</section><!-- End section#blog.even --> 

<footer id="footer"> 

    <!-- Footer markup here --> 

</footer><!-- End footer --> 


</body> 
</html>

一些額外的信息。正如你可以看到我開始與<header> - 頁眉標籤，在那之後我設置局部地區可達與<section> - 內部的標籤我將在<article> - 標籤與<article class="container_12">一個class能夠使用網格960內部的<article> - 標籤我將設置文本，圖像等

好知道的是，我標記的文章在一些路段經常使用，我這樣做是因爲在幾篇文章具體部分區分。與文章確實有一個連接，但在不同的文章發佈。

我喜歡聽你對我的標記到目前爲止的意見，以及你將如何處理。

謝謝。

來源

2013-02-14 Caspert

那麼，如果谷歌應該得到幫助，那麼您最能幫助谷歌抓取工具：D您的標籤慣例看起來不錯，但您認爲它過於完善，儘管它可以幫助您構建內容。但谷歌爬蟲很高興我猜 – kidwon 2013-02-14 12:20:37

我認爲你不應該在**文章**標籤外面使用**部分**。部分是文章的一部分。就你所做的而言，它沒有正確的語義。請參閱：https://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element – Wojtek1150 2016-06-06 08:54:13

你的標記完全可以接受。我會建議也許不會用id標籤太沉重，而是要爲你的CSS提供更多面向對象的方法。欲瞭解更多信息，請點擊這裏：http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

否則你的標記是好的。

來源

2013-02-14 14:57:18 cliffbarnes

非常感謝。奧克很好。我也看看你的文檔，這是一篇很棒的文章。我會閱讀它並將其用於我自己的代碼標記中。有一個問題，我應該在什麼時候使用'

'標籤。我認爲只適用於很長的文本文章，我認爲... – Caspert 2013-02-14 15:45:27

是的，我想說的是。我想你可以使用

HTML5網站的正確標記？

回答

相關問題