HTML5 简历语义

发布于 2024-11-30 09:04:15 字数 612 浏览 0 评论 0原文

我正在制作我的简历，并希望使用 HTML5 语义。列出我的工作经历的最佳语义方式是什么？每项工作经历的信息包含日期、公司、职位和描述。

我心里有两个选择：

<h2>Experience</h2>
<ul>
  <dl>
    <dt><h3>JobTitle</h3> <span>Company + timeperiod</span></dt>
    <dd>description</dd>
   </dl>
</ul>

或者将每个经历视为如下文章在语义上更正确吗？

<h2>Experience</h2>
  <article>
    <h3>Jobtitle</h3> 
    <p>description</p>
    <footer>Company + timeperiod</footer>
  </article>

我很想听听您对此的想法！

原文

I am working on my resume and want to use HTML5 semantics.
What is the best semantic way to list my work experience? The information for each work experience contains the date, the company, the job title and a description.

I have two options in mind:

<h2>Experience</h2>
<ul>
  <dl>
    <dt><h3>JobTitle</h3> <span>Company + timeperiod</span></dt>
    <dd>description</dd>
   </dl>
</ul>

Or is it semantically more correct to consider each experience as an article as follows?

<h2>Experience</h2>
  <article>
    <h3>Jobtitle</h3> 
    <p>description</p>
    <footer>Company + timeperiod</footer>
  </article>

I would love to hear your thoughts on this one!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小嗲 2024-12-07 09:04:15

我会坚持使用嵌套的~~definition~~描述列表，如

“表示一个组件 [...]，由一个独立的组合 [...] 组成，旨在独立分发或可重用，例如在联合组织”。

您还加倍了一些事情，例如将

元素内部。

<section>
    <h2>Experience</h2>
    <dl>
        <dt>THE JOB TITLE</dt>
        <dd>
            <dl>
                <dt>Company:</dt><dd>THE COMPANY</dd>
                <dt>Period:</dt><dd>
                    <time class="dtstart" datetime="2007-02-01">Feb 2007</time> -
                    <time class="dtend" datetime="2009-09-30">Sep 2009</time>,
                </dd>
                <dt>Description:</dt><dd>
                    DESCRIPTION
                </dd>
            </dl>
        </dd>
        <!-- more jobs here as dt-dd-pairs -->
    </dl>
</section>

whatwg.org : 时间元素

I would stick to nested ~~definition~~ description lists, as the <article> "represents a component […] that consists of a self-contained composition […] that is intended to be independently distributable or reusable, e.g. in syndication".

You are also doubling some things, like nesting the <dl> into an <ul> or having an heading (<h3>) inside of a <dt>-element.

<section>
    <h2>Experience</h2>
    <dl>
        <dt>THE JOB TITLE</dt>
        <dd>
            <dl>
                <dt>Company:</dt><dd>THE COMPANY</dd>
                <dt>Period:</dt><dd>
                    <time class="dtstart" datetime="2007-02-01">Feb 2007</time> -
                    <time class="dtend" datetime="2009-09-30">Sep 2009</time>,
                </dd>
                <dt>Description:</dt><dd>
                    DESCRIPTION
                </dd>
            </dl>
        </dd>
        <!-- more jobs here as dt-dd-pairs -->
    </dl>
</section>

whatwg.org: the-time-element

回复收藏 0 原文

最美不过初阳 2024-12-07 09:04:15

我使用 details/summary 以及其他语义标签（如 section 和 header）来执行此操作。

<main>
  <header>
    <h1>Chunliang Lyu</h1>
    <a href="https://chunlianglyu.com/">chunlianglyu.com</a>
    <a href="https://github.com/cllu">github.com/cllu</a>
  </header>
  <section class="education">
    <h2>Education</h2>
    <details>
      <summary>The Chinese University of Hong Kong, <time>2011 - 2016</time></summary>
      Research Area: Entity Retrieval, Natural Language Processing, Knowledge Graph.
    </details>
  </section>
</main>

details 的优点之一是，在 Chrome 等受支持的浏览器上，您可以单击 summary 元素来切换相应 details 元素的显示。

我制作了一个小应用程序，用于将 Markdown 文本转换为具有上述结构的 HTML，同时还可以使用 schema.org 启用语义标记。检查我的项目 https://github.com/cllu/Semantic-Resume 和应用程序在 https://semantic-resume.chunlianglyu.com/。

I am doing this using details/summary, as well as other semantic tags like section and header.

<main>
  <header>
    <h1>Chunliang Lyu</h1>
    <a href="https://chunlianglyu.com/">chunlianglyu.com</a>
    <a href="https://github.com/cllu">github.com/cllu</a>
  </header>
  <section class="education">
    <h2>Education</h2>
    <details>
      <summary>The Chinese University of Hong Kong, <time>2011 - 2016</time></summary>
      Research Area: Entity Retrieval, Natural Language Processing, Knowledge Graph.
    </details>
  </section>
</main>

One advantage of details is that on supported browsers like Chrome, you can click the summary element to toggle display of the corresponding details element.

I have made a small app to convert Markdown text to HTML with above structure, also enabling semantic markup with schema.org. Check my project at https://github.com/cllu/Semantic-Resume, and the app at https://semantic-resume.chunlianglyu.com/.

回复收藏 0 原文

明月夜 2024-12-07 09:04:15

我会这样做：

  <section>
     <h2>Experience</h2>
     <article>
         <h3>Jobtitle</h3> 
         <p>description</p>
         <footer>Company + timeperiod</footer>
     </article>
  </section>

注意我还添加了部分标签。请参阅 http://coding.smashingmagazine.com /2011/08/16/html5-and-the-document-outlined-algorithm/

I would do it like so:

  <section>
     <h2>Experience</h2>
     <article>
         <h3>Jobtitle</h3> 
         <p>description</p>
         <footer>Company + timeperiod</footer>
     </article>
  </section>

Notice I also added the section tag. See http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/

回复收藏 0 原文

~没有更多了~