HTML 5 Page Without Main <Header>

HTML 5 Page without main header?

Decide for every sectioning root element (e.g., body) and every sectioning content element (e.g., article) if it contains content which is appropriate for header. The spec defines that it’s for "introductory content", and gives the following examples:

introductory or navigational aids
heading (an h1–h6 element) (not required)
table of contents, a search form, or any relevant logos

If there is such content, use a header element. If the content in that sectioning root/content element is scattered, use several header elements.

Keep in mind that the header always applies for "its nearest ancestor sectioning content or sectioning root element":

<body>
  <header> <!-- this header is for the whole page --> </header>

  <article>
    <header> <!-- this header is for the whole article element --> </header>

    <div>
      <header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
    </div>

    <section>
      <header> <!-- this header is for this article’s section element only --> </header>
    </section>

  </article>

  <figure>
    <header> <!-- this header is for the figure element only --> </header>
  </figure>

  <strong>
    <header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
  </strong>

</body>

Is an HTML5 header tag unnecessary if there is only a single hx tag inside it?

From the first Note section on the W3C's header spec which ajp15243 mentioned above, emphasis mine:

A header element is intended to usually contain the section's heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

If all you have is a single (as per your example) <h1></h1>, the <header> tag is not required for your document to be properly-formed and semantically correct.

You might find that having the <header> element as a wrapper aids you in styling the h1 later with CSS, but as far as the HTML alone in this case, you're semantically fine either with or without <header>.

How to handle headers in HTML5

Should I put that inside the article header instead?

Yes. This is metadata about the article, not about the document, so it should be inside of article. And header is the appropriate element for this (footer might also be appropriate, as their differences aren’t strictly defined; however, I’d go with header in your case).

If so, would it be considered redundant to wrap the article element inside main tags?

No. Without specifying main, consumers could only guess (but wouldn’t know for sure) which is considered to be the main content of the page. Well, if the article is the only sectioning content element of body, the situation is pretty clear (what else could the main content be?), however, there might always be consumers that especially look for main, as well as the main role (which gets implicitly added when using the main element).

And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?

If it’s metadata/content about this article (i.e., not the "main" content of that section), header and footer are appropriate.

If it’s content related to this article, the sectioning content element aside could be appropriate (it depends on the kind of relation if it should be used as child of article, which represents the article, or as child of body, which represents the document).

Does it make sense not to have the header at the top inside the article element?

Yes. A header doesn’t have to be at the top and a footer doesn’t have to be at the bottom. You can even have several header/footer elements for the same section.

Header in semantic HTML5

As you are using a sectioning element (section in your case, but you might want to use aside), these sections already have an implicit outline entry.

You can provide an explicit entry by using a heading (h1-h6).

So yes, you should use a heading element (h1-h6) for specifying the heading of each block (→ section).

In addition, you may use a header element. But this is not required (it makes sense to use it if your header consists of more than just the heading).

So I’d go with:

<aside>
  <h1>News</h1>
  <!-- content -->
</aside>

<aside>
  <h1>Statistics</h1>
  <!-- content -->
</aside>

And for complex headers:

<aside>
  <header>
    <h1>News</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

<aside>
  <header>
    <h1>Statistics</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

How do websites keep the header on every page if the header is in html?

So I know it's been awhile since I asked the question and probably nobody cares anymore, but I just want to post an update after finding a solution to my question about using php code and how it all works.

First, I learned that in order for this to work, all my files had to be in php format. So I pulled up my folder of my local HTML files and literally just renamed it from something like "index.html" to "index.php". Then, without changing the HTML code, I opened it up in my browser and it was like nothing happened, except it was better! Now it can not only read HTML and style and script codes, but also php codes as well! I added:

<?php
    include("header.php");
?>

to the top of my index.php file, for example, and then converted the rest of the files into php format like I did for this. I copied over my header html and css code and saved it in a separate php file in the same folder, and - there was no header. I was confused. What?? Why is it not doing anything? The header.php itself is working, why is the include function not??

Then, I learned that this php include code can't be executed on my local drive, so it doesn't work on my local drive but works when it is public and on a real website hosting service. I then installed XAMPP, which is a commonly used PHP development environment that is an Apache distribution and is totally free. It runs a sort of local hosting service that will support this php code and cause it to execute the way I intended it to. I'm sorry I'm not good at explaining how this works, as I just find it and use it. Anyways, XAMPP did make the php code included above actually do its job and I finally got the header-system I always wanted. Happily ever after, right?

Nope. Now that fundamental stuff is gone, I have to face other problems like formatting (a real pain in the a** considering how I have to find css problems in tons and tons of overlapping code), creating an entire personal search system (having to figure out how to make a php file actually use my brand new MySQL database, which is also run by XAMPP), and lots of other things. But, that sounds like a great adventure that I am willing and definitely eager to go through. Now, finally I am done blabbing for the day...I wonder how many hours of other people's time I just wasted.

Oh yeah..I forgot to mention, happy Fourth of July! (and happy birthday to the beloved Captain America)

Correct markup for headers

Don’t use a heading element (h1-h6) for the subheading. This was once possible with the hgroup element, but it got removed.

Now the HTML5 spec has a section about Subheadings, subtitles, alternative titles and taglines. Use a p element for the subheading, and group both, the heading and the subheading in a header element:

<article>
  <header>
    <p>New product</p>
    <h1>Launching our new X-series</h1>
  </header>
</article>

If you think the lead paragraph should also be part of the header (instead of the main content), you can put it in the header, too.

Make header and footer files to be included in multiple html pages

You can accomplish this with jquery.

Place this code in index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

and put this code in header.html and footer.html, at the same location as index.html

<a href="http://www.google.com">click here for google</a>

Now, when you visit index.html, you should be able to click the link tags.

How do I properly handle accessibility for Html table with no heading row

Data tables always have two axis of information. They always must have an header row and an header column at least.
Otherwise, if you can't easily put header rows and columns to label things, even only mentally, semantically speaking, it's not really a data table, even if it visually looks like one, and a more appropriate markup is needed, such as a simple list or a definition list, or just simple text presented in a grid layout.

In your example, it indeed looks like a real data table, with two piece of information in each row which are always the same across rows. That's even the base definition of a data table: a collection of items for which you always have the same set of properties repeated.

IF we take the row "subcategory 1" as an example, what are these two values "58%" and "58.15g" ?
I need to find what they represent somewhere, and this information should be present in the header row.

The data might be so obvious for you that you don't need that header row, but it is probably not so obvious for your readers, screen reader users or not by the way.

So, my recommendation is to add it, and to make it visible on screen. It will also help perfectly sighted users to understand the data.
Beyond just understanding the data, it's also the opportunity to add filtering and sorting, and why not column and/or row reordering, very useful if the table is big.

Just a side note on colspan/rowspan: as a screen reader user myself, I think that, in most of the cases, it's better to have empty cells rather than colspan/rowspan.
They often make the navigation much harder for nothing, and it might oblige you to compexify the markup quite a lot to make everything announced correctly. A simple visually hidden "-" can help explicitly telling that the cell is empty or has no meaningful value, if it isn't clear enough.

A good usecase for rowspan/colspan is when you have several header rows or columns, in order to create groups. Quick example: a first header row with "morning", "afternoon", "evening" and "night", and a second header row with hours from 00 to 23.
Otherwise, it's often a bad idea to use colspan/rowspan inside the data themselves.

HTML 5 Page Without Main <Header>