1
새 웹 사이트를 HTML5/CSS3으로 개발하고 있습니다. 내 PSD 파일을 HTML5/CSS3으로 변환 할 때 HTML5 웹 사이트에 올바른 마크 업이 무엇인지 궁금합니다.HTML5 웹 사이트의 올바른 마크 업은 무엇입니까?
다음은 웹 사이트의 단순한 와이어 프레임입니다. 적어도 다른 영역에서는 전체 너비로 만들길 원합니다. 당신이 여기에서 볼 수 있듯이
, 나는 정보에 대한 내 홈페이지에 몇 가지 다른 부분을 갖고 싶어 :
이
레이아웃입니다.
그리고 나는이 태그를 내놓았다 :
나는 더 이상 볼 수 없습니다 모든 목록을 복사 할 때, 나는 생략이 코드에서 내용, 텍스트와 이미지를 가지고 있기 때문에 . 이미지 또는 텍스트는 아래 설명과 마주합니다.
<!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>
일부 추가 정보를 제공합니다. <article class="container_12">의 class와 태그 수있을 것 - 나는 <article>에서 것이다 내부 태그 - 그 내가 <section>으로 일부 지역을 설정 한 후, 헤더에 대한 태그 - 당신은 내가 <header> 시작 볼 수 있듯이 그 <article> 내부 격자 960을 사용하는 - 나는 텍스트를 설정합니다 태그, 이미지 등
알고 좋은 일부 섹션이 자주 사용에 난 기사를 태그 것입니다, 나는 때문에 여러 기사를 이렇게 구별 할 수있는 특정 섹션. With Articles는 서로 연결되어 있지만 게시 할 기사가 다릅니다.
지금까지 내 마크 업과 사용자의 의견에 귀를 기울이고 싶습니다.
감사합니다.
Google이 전혀 도움이된다면 Google 크롤러가 가장 도움이됩니다. D 귀하의 태그 규칙은 훌륭하게 보이지만 귀하의 콘텐츠를 구조화하는 데 도움이되는만큼 내 생각에 과장됩니다. 하지만 Google 크롤러는 기쁜 일입니다. – kidwon
** 기사 ** 태그 외에 ** 섹션 **을 사용해서는 안됩니다. 섹션은 기사의 일부입니다. 당신이 그것을 한 방식으로, 그것은 올바른 의미를 가지고 있지 않습니다. 참조 : https://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element – Wojtek1150