Fix HTML5 spec violations and flip validator to hard-fail (closes #37)#42
Merged
Merged
Conversation
Real HTML5 bugs fixed (per vnu Nu HTML Checker output):
Layouts (_layouts/*.html):
- Add <!DOCTYPE html> to default.html, blogpost.html, and home.html
(missing doctype was the cascade cause of many parser errors).
- Move {% include footer.html %} inside <body> (was placed outside).
- home.html: fix attribute comma typos (img src=, width=, style= had
literal commas between attributes), replace width="25%" with inline
style, add alt text, fix "bottom: 20" missing unit.
Includes (_includes/*.html):
- head.html: remove duplicate <title> tag (jekyll-seo-tag already
injects one via {% seo %}); add page.extra_head injection point.
- jumbotron.html: replace obsolete <font> element with inline style.
- blog_image.html: replace <font size="1"> and align="bottom" with
caption-side / font-size CSS.
- person.html: add alt={{ include.name }} to the avatar img.
Pages:
- about.md, location.md (4 photos): add alt text, replace width="200px"
/ width="500" attrs with sane equivalents.
- people.html, publications.html: move inline <style> blocks (which
HTML5 forbids inside <div>) to dedicated css/people.css and
css/publications.css, loaded via page.extra_head front-matter.
- blog.html: drop redundant <p>...</p> wrapping around post.excerpt
(Jekyll already wraps excerpts in <p>, producing invalid <p><p>...).
Blog posts whose <img> tags leak into the blog index excerpt:
- 2015-11-06-announcing_plab.md, 2015-11-13-big-data-nih.md,
2018-10-30-high-throughput-legal-decisions.md,
2018-12-5-incubator-award.md, 2019-7-26-huang-poster.md: add alt
attributes and convert width="X%" to inline style.
Config:
- .html5validator.yaml: blacklist directory names 2015/2016/2017/2018
to skip the legacy archive (both _site/blog/2015/... and _site/2015/
exist; blacklist matches dir names anywhere).
- site-health.yml: remove continue-on-error: true from the Validate
HTML step — now hard-fails on new regressions.
Local: 0 vnu errors across active pages; 0 lychee errors.
jmxpearson
pushed a commit
that referenced
this pull request
May 12, 2026
The home layout's body had `background-size: 80%` with no height set. In quirks mode (pre-PR-#42, when no doctype existed) body filled the viewport by default, so 80% scaled the [λ] logo nicely against the full window. After adding DOCTYPE in #42 standards mode kicked in, body shrinks to content height, and 80% scales against a much smaller body — which pushed the floated DUSOM image into visual overlap with the (now smaller) central [λ]. Setting min-height: 100vh restores the original visual.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #37.
Summary
Validate HTMLinsite-health.ymlwascontinue-on-error: truebecause the templates produced a flood of HTML5 spec warnings. Triaged the actual output of vnu (Nu HTML Checker, the same tool the action wraps) and fixed the real bugs. Now the step hard-fails on regressions.What was actually broken
Layouts:
default.html,blogpost.html,home.htmlhad no<!DOCTYPE html>(cascade cause of many parser errors){% include footer.html %}outside<body>(invalid)_layouts/home.htmlhad literal comma typos between img attributes (<img src=", width=", style="..."),width="25%"(percent not allowed on width attr), missing alt, andbottom: 20(no unit)Includes:
head.htmlwas emitting two<title>tags — one via{% seo %}(jekyll-seo-tag) and one hardcoded. Removed the duplicate. Also added apage.extra_headinjection point.jumbotron.htmlandblog_image.htmlused the obsolete<font>element — replaced with CSS._includes/person.htmlwas missingalton the avatar — addedalt={{ include.name }}.Pages:
about.md,location.md(4 photos): added alt text, swapped invalidwidth="200px"/width="500"for sensible equivalents.people.html,publications.html: moved inline<style>blocks (forbidden as child of<div>per HTML5) tocss/people.cssandcss/publications.css, loaded via the newpage.extra_headmechanism.blog.html: was wrapping{{ post.excerpt }}in<p>...</p>even though Jekyll already wraps excerpts in<p>, producing<p><p>...</p></p>. Removed the redundant wrapper.Blog posts whose images leak into the blog index excerpt (5 posts): added alt text and converted
width="X%"to inline style. These had to be fixed even though some are in the legacy archive, because the index aggregates excerpts.Config
.html5validator.yaml:blacklist: [2015, 2016, 2017, 2018]skips the legacy archive (matches any directory with those names; covers both_site/blog/2015/...and_site/2015/...from a few placeholder posts).site-health.yml: droppedcontinue-on-error: truefrom Validate HTML.Test plan
bundle exec jekyll buildcleanlycheestill passes (89 OK / 0 errors)pre-commitandsite-healthpass on the PRNotes
_posts/2015-11-02-sample_blogpost.md,_posts/2015-11-03-sample_blogpost.md,_posts/2015-11-03-sample_blogpost2.mdare pure scaffolding ("Blog post blog post. Blog post blog post.") that ended up at_site/2015/.../because theircategory:is commented out. Excluded via the blacklist for now — could be deleted in a follow-up.<style>live in<head>only; placing it in<body>flow content is invalid even when not nested in a<div>. Thepage.extra_headmechanism added here also unlocks per-page meta tags, link rels, etc. if needed in the future.https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Generated by Claude Code