我从2006年完成的教程中选择了以下设计,并决定在HTML5中标记它。设计如下:
我的标记如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enlighten Designs - About</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="about">
<div id="page-wrapper">
<nav id="site-nav" role="navigation">
<h2 class="visually-hidden">Site Navigation</h2>
<ul>
<li id="about-nav"><a href="#">About</a></li>
<li id="services-nav"><a href="#">Services</a></li>
<li id="portfolio-nav"><a href="#">Portfolio</a></li>
<li id="contact-nav"><a href="#">Contact Us</a></li>
</ul>
</nav>
<header id="page-header" role="banner">
<h1>Enlighten Designs</h1>
</header>
<main id="content" class="container" role="main">
<div id="primary">
<section>
<h2>About</h2>
<p><strong>Enlighten Designs</strong> is an internet solutions provider that specialises in front and back end development. To view some of the websites we have created view our <a href="#">portfolio</a>.</p>
<p>We are currently undergoing a "face lift", so if you have any questions or would like more information about the sevices we provide please feel free to contact us.</p>
</section>
<section>
<h2>Contact Us</h2>
<address>
Phone: <span>(07) 853 6060</span><br>
Fax: <span>(07) 853 6060</span><br>
Email: <a href="mailto:info@enlighten.co.nz"><span>info@enlighten.co.nz</span></a><br>
P.O. Box: <span>14159, Hamilton, New Zealand</span>
</address>
<p><a href="#">More contact information</a>...</p>
</section>
</div><!-- end primary -->
<aside id="secondary" role="complementary">
<h2>Featured Projects</h2>
<h3>The New Zealand National Party</h3>
<p>We recently launched the <a href="#" rel="external">New Zealand National Party</a> website - Lorem ipsem dolor sit amet. Pita ala pesama borak na falanuisen</p>
<h3>Greensets</h3>
<p>We recently launched the <a href="#" rel="external">Greensets</a> website - Lorem ipsem dolor sit amet. Pita ala pesama borak na falanuisen</p>
<h3>Nutrition Care</h3>
<p>We recently launched the <a href="#" rel="external">Nutrition Care</a> website - Lorem ipsem dolor sit amet. Pita ala pesama borak na falanuisen</p>
</aside>
</main>
<footer id="page-footer" role="contentinfo">
<div class="fl">
<p>Copyright © Enlighten Designs</p>
<p>Powered by Enlighten Hosting and Vadmin 3.0 CMS</p>
</div>
<ul class="fr">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Terms of Trade</a></li>
</ul>
</footer>
</div>
</body>
</html>
发布于 2015-01-06 23:01:03
如果可能的话,我会将header
(带有站点标题)放在nav
之前。它将产生一个更好的文件大纲。
您对strong
的使用似乎不合适。它只能用于“强烈的重要性、严肃性或紧迫性”。使用span
(+ CSS)或者可能使用b
。
如果站点的每个页面都存在带有“特色项目”的侧边栏,则不应将其包括在main
元素中。但如果只是在主页上,就没问题了。
您也可以将URI用于电话和传真号码:tel
URI方案 (请参阅下面的示例,但请注意,我没有验证这是这类号码的最佳/正确的URI语法)。
您对br
(在address
中)的使用是不合适,因为这里的换行符似乎不是内容的一部分。相反,您应该对每个“行”使用所谓的“块级”元素,这样即使是文本浏览器用户也可以轻松地理解这些内容。
在您的示例中,dl
元素似乎是合适的(虽然它被定义为HTML4.01中的定义列表,但它在HTML5中的含义被更改为描述列表):
<address>
<dl>
<dt>Phone:</dt> <dd><a href="tel:078536060">(07) 853 6060</a></dd>
<dt>Fax:</dt> <dd><a href="tel:078536060">(07) 853 6060</a></dd>
<dt>Email:</dt> <dd><a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a></dd>
<dt>P.O. Box:</dt> <dd>14159, Hamilton, New Zealand</dd>
</dl>
</address>
你可以用small
版权通知的内容。
https://codereview.stackexchange.com/questions/75815
复制相似问题