4 files changed, 189 insertions, 103 deletions
diff --git a/assets/cgit.css b/assets/cgit.css
index d10a24d..e02d551 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -21,99 +21,142 @@ div#cgit table {
 	border-collapse: collapse;
 }
 
-div#cgit table#header {
+div#cgit #header {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		"logo heading switch"
+		"logo desc    owner";
+	align-items: center;
+	column-gap: 10px;
 	width: 100%;
 	margin-bottom: 1em;
 }
 
-div#cgit table#header td.logo {
-	width: 96px;
-	vertical-align: top;
+div#cgit #header .logo {
+	grid-area: logo;
+	align-self: start;
+}
+
+div#cgit #header .logo img {
+	display: block;
+	max-width: 96px;
 }
 
-div#cgit table#header td.main {
+div#cgit #header h1.main {
+	grid-area: heading;
+	margin: 0;
 	font-size: 250%;
-	padding-left: 10px;
+	font-weight: normal;
 	white-space: nowrap;
 }
 
-div#cgit table#header td.main a {
+div#cgit #header h1.main a {
 	color: #000;
 }
 
-div#cgit table#header td.form {
-	text-align: right;
-	vertical-align: bottom;
-	padding-right: 1em;
-	padding-bottom: 2px;
-	white-space: nowrap;
-}
-
-div#cgit table#header td.form form,
-div#cgit table#header td.form input,
-div#cgit table#header td.form select {
+div#cgit #header .branch-switch {
+	grid-area: switch;
+	justify-self: end;
+	align-self: end;
 	font-size: 90%;
 }
 
-div#cgit table#header td.sub {
+div#cgit #header .sub {
+	grid-area: desc;
+	margin: 0;
 	color: #777;
 	border-top: solid 1px #ccc;
-	padding-left: 10px;
 }
 
-div#cgit table.tabs {
+div#cgit #header .owner {
+	grid-area: owner;
+	justify-self: end;
+	text-align: right;
+}
+
+@media (max-width: 640px) {
+	div#cgit #header {
+		grid-template-columns: auto 1fr;
+		grid-template-areas:
+			"logo heading"
+			"desc desc"
+			"owner owner"
+			"switch switch";
+		row-gap: 4px;
+	}
+	div#cgit #header .branch-switch,
+	div#cgit #header .owner {
+		justify-self: start;
+		text-align: left;
+	}
+	div#cgit #header h1.main {
+		white-space: normal;
+	}
+}
+
+div#cgit .tabs {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	column-gap: 0.5em;
 	border-bottom: solid 3px #ccc;
-	border-collapse: collapse;
 	margin-top: 2em;
-	margin-bottom: 0px;
-	width: 100%;
 }
 
-div#cgit table.tabs td {
-	padding: 0px 1em;
-	vertical-align: bottom;
+div#cgit .tabs ul {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	flex: 1 1 auto;
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
 
-div#cgit table.tabs td a {
+div#cgit .tabs li {
+	margin: 0;
+	padding: 0 1em;
+}
+
+div#cgit .tabs a {
+	display: inline-block;
 	padding: 2px 0.75em;
 	color: #777;
 	font-size: 110%;
 }
 
-div#cgit table.tabs td a.active {
+div#cgit .tabs a.active {
 	color: #000;
 	background-color: #ccc;
 }
 
-div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
+div#cgit .tabs a.external:after {
 	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgAhcJDQY+gm2TAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABbSURBVAhbY2BABs4MU4CwhYHBh2Erww4wrGFQZHjI8B8IgUIscJWyDHcggltQhI4zGDCcRwhChPggHIggP1QoAVmQkSETrGoHsiAEsACtBYN0oDAMbgU6EBcAAL2eHUt4XUU4AAAAAElFTkSuQmCC);
 	opacity: 0.5;
 	margin: 0 0 0 5px;
 }
 
-div#cgit table.tabs td.form {
-	text-align: right;
-}
-
-div#cgit table.tabs td.form form {
+div#cgit .tabs .search {
 	padding-bottom: 2px;
 	font-size: 90%;
 	white-space: nowrap;
 }
 
-div#cgit table.tabs td.form input,
-div#cgit table.tabs td.form select {
+div#cgit .tabs .search input,
+div#cgit .tabs .search select {
 	font-size: 90%;
 }
 
-div#cgit div.path {
+div#cgit .path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
 	color: #000;
 	background-color: #eee;
+	overflow-wrap: anywhere;
 }
 
-div#cgit div.content {
+div#cgit .content {
 	margin: 0px;
 	padding: 2em;
 	border-bottom: solid 3px #ccc;
@@ -662,19 +705,19 @@ div#cgit span.deletions {
 	color: #800;
 }
 
-div#cgit div.footer {
+div#cgit .footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
 	color: #ccc;
 }
 
-div#cgit div.footer a {
+div#cgit .footer a {
 	color: #ccc;
 	text-decoration: none;
 }
 
-div#cgit div.footer a:hover {
+div#cgit .footer a:hover {
 	text-decoration: underline;
 }
 
diff --git a/source/ui-shared.c b/source/ui-shared.c
index eb68ab7..69d2cdf 100644
--- a/source/ui-shared.c
+++ b/source/ui-shared.c
@@ -867,7 +867,7 @@ void cgit_print_docstart(void)
 
 void cgit_print_docend(void)
 {
-	html("</div> <!-- class=content -->\n");
+	html("</main>\n");
 	if (ctx.cfg.embedded) {
 		html("</div> <!-- id=cgit -->\n");
 		if (ctx.cfg.footer)
@@ -877,10 +877,10 @@ void cgit_print_docend(void)
 	if (ctx.cfg.footer)
 		html_include(ctx.cfg.footer);
 	else {
-		htmlf("<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit %s</a> "
+		htmlf("<footer class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit %s</a> "
 			"(<a href='https://git-scm.com/'>git %s</a>) at ", cgit_version, git_version_string);
 		html_txt(show_date(time(NULL), 0, cgit_date_mode(DATE_ISO8601)));
-		html("</div>\n");
+		html("</footer>\n");
 	}
 	html("</div> <!-- id=cgit -->\n");
 	html("</body>\n</html>\n");
@@ -1015,9 +1015,6 @@ static void print_header(void)
 {
 	char *logo = NULL, *logo_link = NULL;
 
-	html("<table id='header'>\n");
-	html("<tr>\n");
-
 	if (ctx.repo && ctx.repo->logo && *ctx.repo->logo)
 		logo = ctx.repo->logo;
 	else
@@ -1026,44 +1023,47 @@ static void print_header(void)
 		logo_link = ctx.repo->logo_link;
 	else
 		logo_link = ctx.cfg.logo_link;
+
+	html("<header id='header'>\n");
 	if (logo && *logo) {
-		html("<td class='logo' rowspan='2'><a href='");
+		html("<a class='logo' href='");
 		if (logo_link && *logo_link)
 			html_attr(logo_link);
 		else
 			html_attr(cgit_rooturl());
 		html("'><img src='");
 		html_attr(logo);
-		html("' alt='cgit logo'/></a></td>\n");
+		html("' alt='cgit logo'/></a>\n");
 	}
 
-	html("<td class='main'>");
+	html("<h1 class='main'>");
 	if (ctx.repo) {
 		cgit_index_link("index", NULL, NULL, NULL, NULL, 0, 1);
 		html(" : ");
 		cgit_summary_link(ctx.repo->name, NULL, NULL, NULL);
-		if (ctx.env.authenticated) {
-			html("</td><td class='form'>");
-			html("<form method='get'>\n");
-			cgit_add_hidden_formfields(0, 1, ctx.qry.page);
-			html("<select name='h' onchange='this.form.submit();'>\n");
-			refs_for_each_branch_ref(get_main_ref_store(the_repository),
-						 print_branch_option, ctx.qry.head);
-			if (ctx.repo->enable_remote_branches)
-				refs_for_each_remote_ref(get_main_ref_store(the_repository),
-							 print_branch_option, ctx.qry.head);
-			html("</select> ");
-			html("<input type='submit' value='switch'/>");
-			html("</form>");
-		}
 	} else
 		html_txt(ctx.cfg.root_title);
-	html("</td></tr>\n");
+	html("</h1>\n");
+
+	if (ctx.repo && ctx.env.authenticated) {
+		html("<form class='branch-switch' method='get'>\n");
+		cgit_add_hidden_formfields(0, 1, ctx.qry.page);
+		html("<select name='h' aria-label='Branch' onchange='this.form.submit();'>\n");
+		refs_for_each_branch_ref(get_main_ref_store(the_repository),
+					 print_branch_option, ctx.qry.head);
+		if (ctx.repo->enable_remote_branches)
+			refs_for_each_remote_ref(get_main_ref_store(the_repository),
+						 print_branch_option, ctx.qry.head);
+		html("</select> ");
+		html("<input type='submit' value='switch'/>");
+		html("</form>\n");
+	}
 
-	html("<tr><td class='sub'>");
 	if (ctx.repo) {
+		html("<p class='sub desc'>");
 		html_txt(ctx.repo->desc);
-		html("</td><td class='sub right'>");
+		html("</p>\n");
+		html("<p class='sub owner'>");
 		if (ctx.repo->owner_filter) {
 			cgit_open_filter(ctx.repo->owner_filter);
 			html_txt(ctx.repo->owner);
@@ -1071,11 +1071,13 @@ static void print_header(void)
 		} else {
 			html_txt(ctx.repo->owner);
 		}
-	} else {
-		if (ctx.cfg.root_desc)
-			html_txt(ctx.cfg.root_desc);
+		html("</p>\n");
+	} else if (ctx.cfg.root_desc) {
+		html("<p class='sub desc'>");
+		html_txt(ctx.cfg.root_desc);
+		html("</p>\n");
 	}
-	html("</td></tr></table>\n");
+	html("</header>\n");
 }
 
 void cgit_print_pageheader(void)
@@ -1084,39 +1086,63 @@ void cgit_print_pageheader(void)
 	if (!ctx.env.authenticated || !ctx.cfg.noheader)
 		print_header();
 
-	html("<table class='tabs'><tr><td>\n");
+	if (ctx.env.authenticated)
+		html("<nav class='tabs'>\n");
 	if (ctx.env.authenticated && ctx.repo) {
-		if (ctx.repo->readme.nr)
-			reporevlink("about", "about", NULL,
+		const char *vp = ctx.qry.vpath;
+		html("<ul>\n");
+		if (ctx.repo->readme.nr) {
+			html("<li>");
+			reporevlink("about", "about", "About this repository",
 				    hc("about"), ctx.qry.head, NULL,
 				    NULL);
-		cgit_summary_link("summary", NULL, hc("summary"),
+			html("</li>\n");
+		}
+		html("<li>");
+		cgit_summary_link("summary", "Repository summary", hc("summary"),
 				  ctx.qry.head);
-		cgit_refs_link("refs", NULL, hc("refs"), ctx.qry.head,
+		html("</li>\n<li>");
+		cgit_refs_link("refs", "Branches and tags", hc("refs"), ctx.qry.head,
 			       ctx.qry.oid, NULL);
-		cgit_log_link("log", NULL, hc("log"), ctx.qry.head,
+		html("</li>\n<li>");
+		cgit_log_link("log",
+			      vp && *vp ? fmt("Commit history of %s", vp) : "Commit history",
+			      hc("log"), ctx.qry.head,
 			      NULL, ctx.qry.vpath, 0, NULL, NULL,
 			      ctx.qry.showmsg, ctx.qry.follow);
+		html("</li>\n<li>");
 		if (ctx.qry.page && !strcmp(ctx.qry.page, "blame"))
-			cgit_blame_link("blame", NULL, hc("blame"), ctx.qry.head,
+			cgit_blame_link("blame",
+					vp && *vp ? fmt("Line-by-line blame of %s", vp) : "Blame",
+					hc("blame"), ctx.qry.head,
 				        ctx.qry.oid, ctx.qry.vpath);
 		else
-			cgit_tree_link("tree", NULL, hc("tree"), ctx.qry.head,
+			cgit_tree_link("tree",
+				       vp && *vp ? fmt("Browse the tree at %s", vp) : "Browse the file tree",
+				       hc("tree"), ctx.qry.head,
 				       ctx.qry.oid, ctx.qry.vpath);
-		cgit_commit_link("commit", NULL, hc("commit"),
+		html("</li>\n<li>");
+		cgit_commit_link("commit", "The current commit", hc("commit"),
 				 ctx.qry.head, ctx.qry.oid, ctx.qry.vpath);
-		cgit_diff_link("diff", NULL, hc("diff"), ctx.qry.head,
+		html("</li>\n<li>");
+		cgit_diff_link("diff",
+			       vp && *vp ? fmt("Changes to %s", vp) : "Changes in the current commit",
+			       hc("diff"), ctx.qry.head,
 			       ctx.qry.oid, ctx.qry.oid2, ctx.qry.vpath);
-		if (ctx.repo->max_stats)
-			cgit_stats_link("stats", NULL, hc("stats"),
+		html("</li>\n");
+		if (ctx.repo->max_stats) {
+			html("<li>");
+			cgit_stats_link("stats", "Commit activity", hc("stats"),
 					ctx.qry.head, ctx.qry.vpath);
+			html("</li>\n");
+		}
 		if (ctx.repo->homepage) {
-			html("<a href='");
+			html("<li><a class='external' href='");
 			html_attr(ctx.repo->homepage);
-			html("'>homepage</a>");
+			html("'>homepage</a></li>\n");
 		}
-		html("</td><td class='form'>");
-		html("<form class='right' method='get' action='");
+		html("</ul>\n");
+		html("<form class='search' method='get' action='");
 		if (ctx.cfg.virtual_root) {
 			char *fileurl = cgit_fileurl(ctx.qry.repo, "log",
 						   ctx.qry.vpath, NULL);
@@ -1125,37 +1151,43 @@ void cgit_print_pageheader(void)
 		}
 		html("'>\n");
 		cgit_add_hidden_formfields(1, 0, "log");
-		html("<select name='qt'>\n");
+		html("<select name='qt' aria-label='Search type'>\n");
 		html_option("grep", "log msg", ctx.qry.grep);
 		html_option("author", "author", ctx.qry.grep);
 		html_option("committer", "committer", ctx.qry.grep);
 		html_option("range", "range", ctx.qry.grep);
 		html("</select>\n");
-		html("<input class='txt' type='search' size='10' name='q' value='");
+		html("<input class='txt' type='search' name='q' aria-label='Search' value='");
 		html_attr(ctx.qry.search);
 		html("'/>\n");
 		html("<input type='submit' value='search'/>\n");
 		html("</form>\n");
 	} else if (ctx.env.authenticated) {
 		char *currenturl = cgit_currenturl();
-		site_link(NULL, "index", NULL, hc("repolist"), NULL, NULL, 0, 1);
-		if (ctx.cfg.root_readme)
-			site_link("about", "about", NULL, hc("about"),
+		html("<ul>\n<li>");
+		site_link(NULL, "index", "Repository index", hc("repolist"), NULL, NULL, 0, 1);
+		html("</li>\n");
+		if (ctx.cfg.root_readme) {
+			html("<li>");
+			site_link("about", "about", "About this site", hc("about"),
 				  NULL, NULL, 0, 1);
-		html("</td><td class='form'>");
-		html("<form method='get' action='");
+			html("</li>\n");
+		}
+		html("</ul>\n");
+		html("<form class='search' method='get' action='");
 		html_attr(currenturl);
 		html("'>\n");
-		html("<input type='search' name='q' size='10' value='");
+		html("<input class='txt' type='search' name='q' aria-label='Search' value='");
 		html_attr(ctx.qry.search);
 		html("'/>\n");
 		html("<input type='submit' value='search'/>\n");
-		html("</form>");
+		html("</form>\n");
 		free(currenturl);
 	}
-	html("</td></tr></table>\n");
+	if (ctx.env.authenticated)
+		html("</nav>\n");
 	if (ctx.env.authenticated && ctx.repo && ctx.qry.vpath) {
-		html("<div class='path'>");
+		html("<nav class='path' aria-label='breadcrumb'>");
 		html("path: ");
 		cgit_print_path_crumbs(ctx.qry.vpath);
 		if (ctx.repo->enable_follow_links && !strcmp(ctx.qry.page, "log")) {
@@ -1166,9 +1198,9 @@ void cgit_print_pageheader(void)
 			ctx.qry.follow = !ctx.qry.follow;
 			html(")");
 		}
-		html("</div>");
+		html("</nav>");
 	}
-	html("<div class='content'>");
+	html("<main class='content'>\n");
 }
 
 void cgit_print_filemode(unsigned short mode)
diff --git a/tests/t0010-validate-html.sh b/tests/t0010-validate-html.sh
index ca08d69..91433f8 100755
--- a/tests/t0010-validate-html.sh
+++ b/tests/t0010-validate-html.sh
@@ -29,6 +29,17 @@ test -n "$tidy" || {
 	exit
 }
 
+# Releases of tidy that predate HTML5 reject the semantic elements (header,
+# nav, main, footer) that cgit emits, reporting them as errors. Skip the
+# validation unless tidy is new enough to understand them.
+printf '<!DOCTYPE html>\n<html lang="en"><head><title>t</title></head><body><header>x</header></body></html>\n' \
+	| "$tidy" -q -e >/dev/null 2>&1
+test $? -ge 2 && {
+	skip_all='Skipping html validation tests: tidy is too old for HTML5'
+	test_done
+	exit
+}
+
 test_expect_success 'index page' 'test_url ""'
 test_expect_success 'foo' 'test_url "foo"'
 test_expect_success 'foo/log' 'test_url "foo/log"'
diff --git a/tests/t0102-summary.sh b/tests/t0102-summary.sh
index b8864cb..f1c1e78 100755
--- a/tests/t0102-summary.sh
+++ b/tests/t0102-summary.sh
@@ -7,7 +7,7 @@ test_expect_success 'generate foo summary' 'cgit_url "foo" >tmp'
 test_expect_success 'find commit 1' 'grep "commit 1" tmp'
 test_expect_success 'find commit 5' 'grep "commit 5" tmp'
 test_expect_success 'find branch master' 'grep "master" tmp'
-test_expect_success 'no tags' '! grep "tags" tmp'
+test_expect_success 'no tags' '! grep "Tag</th>" tmp'
 test_expect_success 'clone-url expanded correctly' '
 	grep "git://example.org/foo.git" tmp
 '
@@ -17,7 +17,7 @@ test_expect_success 'no commit 45' '! grep "commit 45" tmp'
 test_expect_success 'find commit 46' 'grep "commit 46" tmp'
 test_expect_success 'find commit 50' 'grep "commit 50" tmp'
 test_expect_success 'find branch master' 'grep "master" tmp'
-test_expect_success 'no tags' '! grep "tags" tmp'
+test_expect_success 'no tags' '! grep "Tag</th>" tmp'
 test_expect_success 'clone-url expanded correctly' '
 	grep "git://example.org/bar.git" tmp
 '
-rw-r--r--	assets/cgit.css	127
-rw-r--r--	source/ui-shared.c	150
-rwxr-xr-x	tests/t0010-validate-html.sh	11
-rwxr-xr-x	tests/t0102-summary.sh	4