Skip to content

Instantly share code, notes, and snippets.

@gsklee

gsklee/W3C HTML

Last active September 17, 2018 18:57
Show Gist options
  • Save gsklee/5d01ff7c618c9da597230a6555f17f9e to your computer and use it in GitHub Desktop.
Save gsklee/5d01ff7c618c9da597230a6555f17f9e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.js
[...`
<html lang='en'>
<head>
<meta charset='utf-8'>
<title></title>
<meta name='description' content=''>
</head>
<body>
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
</hgroup>
<address></address>
<header>
<nav>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
</nav>
<section>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<nav>
<h1></h1>
</nav>
</section>
<aside>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<nav>
<h1></h1>
</nav>
</aside>
</header>
<article>
<h1></h1>
<address></address>
<header>
<nav>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
</nav>
<section>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<nav>
<h1></h1>
</nav>
</section>
</header>
<section>
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
</hgroup>
</section>
<section>
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
</hgroup>
</section>
<aside>
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
</hgroup>
<footer>
<nav>
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
</hgroup>
</nav>
</footer>
</aside>
<footer>
<section>
<h1></h1>
</section>
</footer>
</article>
<section>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<header>
<nav>
<h1></h1>
</nav>
<section>
<h1></h1>
</section>
<aside>
<h1></h1>
<nav>
<h1></h1>
</nav>
<nav>
<h1></h1>
</nav>
</aside>
</header>
<article>
<h1></h1>
</article>
<section>
<h1></h1>
<section>
<h1></h1>
</section>
</section>
<aside>
<h1></h1>
</aside>
</section>
<section>
<h1></h1>
<header>
<nav>
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
</hgroup>
</nav>
</header>
</section>
<aside>
<h1></h1>
<section>
<h1></h1>
</section>
</aside>
<footer></footer>
</body>
</html>
`].join('').replace(/>\s+</g, '><');
Raw
W3C HTML
<body> → COMPOSITION
<article> → COMPOSITION #(X <main>)
<section> → COMPOSITION
COMPOSITION → HEADING <header>:? <article>:* <section>:* <aside>:* <footer>:?
<aside> → HEADING <header>:? <article>:* <section>:* <footer>:? #(X <main>)
<header> → <nav>:* SECTION_FLAT:* ASIDE_FLAT:* #(X <main>)
<footer> → <nav>:* SECTION_FLAT:* ASIDE_FLAT:* #(X <main>)
SECTION_FLAT -> HEADING <nav>:*
ASIDE_FLAT -> HEADING <nav>:*
<nav> → HEADING #(X <main>)
HEADING -> (<h1> | <h2> | <h3>) <p>:*
Raw
WHATWG HTML
html -> "<html lang='" TEXT "'>" head body "</html>" # lang:!
head -> "<head>" meta_charset base:? title meta_description meta:* link:* style:* "</head>"
meta_charset -> "<meta charset='utf-8'>"
meta_description -> "<meta name='description' content='" TEXT "'>"
meta -> "<meta>"
base -> "<base>" # href:? target:?
title -> "<title>" TEXT "</title>"
link -> "<link>" # href:! rel:!
style -> "<style>" CSS "</style>"
body -> "<body>" COMPOSITION "</body>"
article -> "<article>" COMPOSITION "</article>"
COMPOSITION -> HEADING address:? header:? article:* section:* aside:* footer:?
section -> "<section>" HEADING header:? article:* section:* aside:* footer:? "</section>"
aside -> "<aside>" HEADING header:? article:* section:* footer:? "</aside>"
address -> "<address>" TEXT "</address>"
header -> "<header>" nav:* section_flat:* aside_flat:* "</header>"
footer -> "<footer>" nav:* section_flat:* aside_flat:* "</footer>"
section_flat -> "<section>" HEADING nav:* "</section>"
aside_flat -> "<aside>" HEADING nav:* "</aside>"
nav -> "<nav>" HEADING "</nav>"
HEADING -> hgroup | h1
hgroup -> "<hgroup>" h1 h2 h3:? "</hgroup>"
h1 -> "<h1>" TEXT "</h1>"
h2 -> "<h2>" TEXT "</h2>"
h3 -> "<h3>" TEXT "</h3>"
CSS -> [^<>]:*
TEXT -> [^<>]:*
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment