[imp] Semantic structure improvements - rebased #3251

Merged
merged 1 commit into from Jan 2, 2015

Conversation

Projects
None yet
4 participants
@nternetinspired
Contributor

nternetinspired commented Jan 2, 2015

note: This is a resubmission of #2963

Happy articles have headers

Currently the post and page header elements lies outside of the article element, meaning they have no actual relation to the given article at all, beyond an implied visual relationship.

Old friends, reunited.

This PR moves page and post <header> elements within the <article> element to restore the semantic relationship between the two.

Testing

There are no visual differences in rendered output after this change. But the html5 outliner will be much happier.


It's probably worth also pointing to the spec detailing sectioning content http://www.w3.org/html/wg/drafts/html/master/dom.html#sectioning-content and the usage examples http://www.w3.org/html/wg/drafts/html/master/sections.html#usage-summary-0 for the header element.

You can also check document outline before and after the proposed change by dropping the html into https://gsnedders.html5.org/outliner/


Additional documentation from w3c with a usage examples for article sectioning, including header:

http://www.w3.org/wiki/HTML_structural_elements#.3Cheader.3E_and_.3Cfooter.3E

<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
- <article class="post-content">
+ <div class="post-content">

This comment has been minimized.

@mattr-

mattr- Jan 2, 2015

Member

is there a reason why we wouldn't use <section> here instead?

@mattr-

mattr- Jan 2, 2015

Member

is there a reason why we wouldn't use <section> here instead?

<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
</header>
- <article class="post-content" itemprop="articleBody">
+ <div class="post-content" itemprop="articleBody">

This comment has been minimized.

@mattr-

mattr- Jan 2, 2015

Member

Similar to the above, should we also use <section> here?

@mattr-

mattr- Jan 2, 2015

Member

Similar to the above, should we also use <section> here?

@nternetinspired

This comment has been minimized.

Show comment
Hide comment
@nternetinspired

nternetinspired Jan 2, 2015

Contributor

<section> isn't ideal, it carries too much meaning to be applicable here I think. In general semantic sections should be able to be used standalone, independent of context, and have their own heading. <div> is a better choice in this case I think.

Contributor

nternetinspired commented Jan 2, 2015

<section> isn't ideal, it carries too much meaning to be applicable here I think. In general semantic sections should be able to be used standalone, independent of context, and have their own heading. <div> is a better choice in this case I think.

@mattr-

This comment has been minimized.

Show comment
Hide comment
@mattr-

mattr- Jan 2, 2015

Member

Cool. Thanks! :shipit:

Member

mattr- commented Jan 2, 2015

Cool. Thanks! :shipit:

@mattr- mattr- merged commit 064d6de into jekyll:master Jan 2, 2015

1 check passed

continuous-integration/travis-ci The Travis CI build passed
Details

mattr- added a commit that referenced this pull request Jan 2, 2015

@nternetinspired nternetinspired deleted the nternetinspired:article-semantics branch Jan 2, 2015

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Jan 2, 2015

Member

I think we might be over-engineering our site template...

Member

parkr commented Jan 2, 2015

I think we might be over-engineering our site template...

@nternetinspired

This comment has been minimized.

Show comment
Hide comment
@nternetinspired

nternetinspired Jan 2, 2015

Contributor

@parkr This commit didn't add anything new though, it only nests elements in logically so that they convey the correct meaning. The previous ordering made less sense than simply using <div> for everything.

Contributor

nternetinspired commented Jan 2, 2015

@parkr This commit didn't add anything new though, it only nests elements in logically so that they convey the correct meaning. The previous ordering made less sense than simply using <div> for everything.

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Jan 2, 2015

Member

OK. Thanks for that. I guess I was thinking in more general terms, and this made me think of it.

Member

parkr commented Jan 2, 2015

OK. Thanks for that. I guess I was thinking in more general terms, and this made me think of it.

@nternetinspired

This comment has been minimized.

Show comment
Hide comment
@nternetinspired

nternetinspired Jan 2, 2015

Contributor

I'm 100% against overcomplicating things, and I agree that the default template should be lean and mean, bloat-free.

That said, I do believe that it is always worth using the correct html element for the job at hand, as it almost always results in less work down the line.

Contributor

nternetinspired commented Jan 2, 2015

I'm 100% against overcomplicating things, and I agree that the default template should be lean and mean, bloat-free.

That said, I do believe that it is always worth using the correct html element for the job at hand, as it almost always results in less work down the line.

@jekyll jekyll locked and limited conversation to collaborators Feb 27, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.