首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >启发设计教程- HTML5标记

启发设计教程- HTML5标记
EN

Code Review用户
提问于 2015-01-06 14:59:18
回答 1查看 830关注 0票数 5

我从2006年完成的教程中选择了以下设计,并决定在HTML5中标记它。设计如下:

我的标记如下:

代码语言:javascript
运行
复制
<!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>
EN

回答 1

Code Review用户

发布于 2015-01-06 23:01:03

如果可能的话,我会将header (带有站点标题)放在nav之前。它将产生一个更好的文件大纲。

您对strong的使用似乎不合适。它只能用于“强烈的重要性、严肃性或紧迫性”。使用span (+ CSS)或者可能使用b

如果站点的每个页面都存在带有“特色项目”的侧边栏,则不应将其包括在main元素中。但如果只是在主页上,就没问题了。

您也可以将URI用于电话和传真号码:telURI方案 (请参阅下面的示例,但请注意,我没有验证这是这类号码的最佳/正确的URI语法)。

您对br (在address中)的使用是不合适,因为这里的换行符似乎不是内容的一部分。相反,您应该对每个“行”使用所谓的“块级”元素,这样即使是文本浏览器用户也可以轻松地理解这些内容。

在您的示例中,dl元素似乎是合适的(虽然它被定义为HTML4.01中的定义列表,但它在HTML5中的含义被更改为描述列表):

代码语言:javascript
运行
复制
<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版权通知的内容

票数 1
EN
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://codereview.stackexchange.com/questions/75815

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档