Beginner question, pardon my ignorance:
Can I NOT use some HTML5-specific tags (ex. <header>, <section>, <aside>, <main>) and still pass my page as HTML5 by declaring so? I've been practicing writing a few basic layouts and reading tons of articles and tutorials. The more I do it, the more I can't help thinking some tags are redundant. For example, why <header> when <h1> <h2>, etc. are headers to begin with? <main> and <section> and <footer> are all supposed to be different, but they all sound to me like a type of "section," so I'm confused. But they all seem to be kind of visual stuff, so why can't just use <div> and <span> for all layout/visual stuff if I am to practice Progressive Enhancement and start with the bare minimum viable contents? To me, it's simpler just to remember two generic tags and say class="footnote" to shape it up after writing a page like a normal barebone writing with just text and images.
People keep telling me how HTML5 is the standard nowadays, so I want to comply, but I am a bit lost on how and when we are supposed to use those tags as many people use each of them slightly differently from others. I thought that maybe I could stick to the most straightforward set of things to mark up my page and avoid usage errors at least for now. Advice?
HTML is at version 5.3 right now, There aren't "HTML5 Tags" and "non-HTML5 tags" in HTML, if it's an element HTML defines it's an HTML tag, if it's not…it's not HTML.
<p> is a tag in HTML, even in version 5.3, so how is it not an "HTML5" tag?
Today browsers read HTML, so if you're loading a site in HTML the chances are it's being read as HTML 5 unless you specify that it's some other language like an older legacy version of HTML, or XHTML, or something else.
As always - correctly mark up your content with the most-fitting elements that HTML supports, full list here: html.spec.whatwg.org
If you're confused about the right time to use a tag, read the spec, they have explanations and examples and it's a very helpful way to understand the right time and place to use any element.
HTML, like any programming language, evolves and with each new version comes new commands and syntax. However, programming languages need to maintain backwards compatibility as much as possible so as not to break code. It's awful when a new version, or evolution, of a programming language not only brings new commands but no longer allows commands from the previous versions. Unfortunately, it happens... and way too often.
You do not need to use HTML5-specific commands for your HTML file to be HTML5-compatible. However, if you want to declare your file as "HTML5" then it certainly needs to use something that discerns it from a previous version of HTML. Otherwise it's just "HTML".
I can understand the confusion as regards the new definitions if you are coming in from the perception of someone who never had to use the old ones. However, know that we've been demanding these new definitions and possibilities for a very long time as they provide specific definitions and possibilities, especially as regards CSS styling and better defined Javascript functionality.
Why are there <header> tags and <H1>, <H2>, etc. tags?
You're mixing them up.
The <header> tag denotes a HEADER section which appears once, although technically it can appear more than once, at the top (preferably) of a page. The <H1>, <H2>, <H3> ... tags are HEADINGS not Headers. They are generally used as titles above paragraphs, divisions or sections and they have various levels of importance as in a heading, a sub-heading, a sub-sub-heading, etc. Today we use them less often than just declaring classes of something like "maintitle", "subtitle", "title2", "title3", etc....
<header> and <footer> sections are wonderful as they clearly state what they're supposed to be, they can be styled the same on every page of a site, and they can contain several divs or grids or such within them.
<main> is important. There can only be one <main> in an HTML document and it separates that portion from the rest for programmatic control.
It may be "simpler" to remember a minimum of commands. But that's similar to trying to speak a language with a limited vocabulary. Eventually you're going to run in to a situation where you're not going to be able to express yourself properly because you lack the specific words or terminology. Programming languages are similar. You can make something run with a limited, and simple, number and breadth of commands. But when you need to improve upon it or evolve it you need more commands and more specificity.
We all used to have <div class="footnote"> divisions which we managed with our stylesheets and we would use ID="X" to manage individual ones from the general. But we did that because we had no choice, not because it was the optimal way to do things. One of the advantages of a declared header and footer is that any code from outside of the HTML page can control or modify the <header> or <footer> content without having to know if the developer used class="footnote" or class="footer" or class="endnote" or whatever... there are lots of advantages and few disadvantages.
We don't use HTML5 tags and commands to "comply". We use them to take advantage of what they bring to us which we did not have before. Yes we all use our commands slightly differently from others. It's a language. We all express ourselves differently and with a different choice of vocabulary to say the same types of things with our unique individual style.
If you are learning HTML now you have the advantage of being able to learn and use the latest and more specific terminology without having to worry about the older terms which were used before. You can, and should, be coming at the language as a new one. If I was learning English today I would completely ignore learning Elisabethan terminology, even though it would be semantically correct, as I can express myself with all of the wide range of more modern, relevant and applicable vocabulary.
I always look forward to learning a new language, programming or otherwise, to be able to learn new ways of expressing my ideas and designs. Enjoy the learning experience and try out and use as many of the new "words" you learn as much as possible.
As HTML 5 is a "superset" of HTML 4 Strict (somewhat) there is nothing wrong with "writing for 4 strict, deploying for 5" avoiding those tags altogether. In fact many developers -- myself included -- will tell you to skip using ARTICLE, ASIDE, HEADER, FOOTER, MAIN, NAV, and SECTION as they are mostly redundant to H1..H6 and HR, adding nothing of value to your pages.
Though NAV is starting to get an actual purpose for marking groups of links to show via alternative means, not one legitimate user-agent has done this in a useful manner, and given the history of such "accessibility" additions to HTML -- such as accesskey menus, header navigation as menus headings for grouping links, etc, etc -- I wouldn't hold my breath on seeing that actually do anything.
Same goes for the Aria role nonsense and stuff like "Schema". Bloated nonsense that exists for no other reason than to make data scrapers lives easier... or perhaps I should call them by their real name, data thieves. It's the same garbage as that microformats idiocy from a decade or so ago, and realistically if you have content of value marked up semantically properly using all the tags for what they are for, with well formed and structured headings, forms, lists, and tables, they do nothing but result in trying to pointlessly micromanage the content for... well there's... uhm... ok, why do people do this again?
So yeah, skip those tags, put the 5 doctype on it, use the actual improvements over HTML 4 such as the cleaner encoding meta, simplified header structure, removal of pointless mime-typing that was redundant to the semantics and/or REL, improved INPUT types, and so forth... as well as the stuff being shoved down our throats whether it makes sense or not like AUDIO and VIDEO. (which are / should be redundant to OBJECT - much like IMG which in the original plan for HTML 4 Strict's successor was also on the chopping block to be removed!).
Nothing wrong with that, you use the HTML 5 DOCTYPE it's still HTML 5 regardless of if you use those extra (pointless, inconsistent, redundant, mind-numbingly stupid) tags or not! Anyone who has a problem with that probably isn't qualified to write a single blasted line of HTML or CSS.
Sadly that seems to describe 80 to 90% of the people making websites right now, and for all intents and purposes 100% of the people who see benefits from things like HTML/CSS frameworks or CSS preprocessors. Not to overuse those two words again but such things -- like the "new" HTML 5 tags we're discussing here -- thrive on ignorance and ineptitude, preying on beginners to pack them full of sand before they ever even have a chance to learn to do things properly or even be able to form an informed opinion on the topic. A situation made all the worse by 90%+ of all web development of the past two decades following HTML 3.2 style browser-wars practices with the 4 tranny doctype slapped atop it. When people have their coding practices stuck in a 1997 mindset ignoring all the benefits introduced in '98, it's really easy to convince them that something fat, bloated, broken, and outright inept is "easier". Those who embraced the intent of HTML 4 Strict, the point of CSS being separate from HTML, and things like progressive enhancement and separation of presentation from content? Not as easily suckered in by the lies.
Part of why I think we need a new specification that is to HTML 5 as 4 strict was to 4 tranny or even HTML 3.2. Deprecating the pointless "structural" tags, along with getting rid of the redundancies and stuff let into the specification from 4 tranny that really have no business in a semantic markup specification -- like EMBED, AUDIO, VIDEO, IMG, custom hyphenated tags, etc, etc. Said specification doing more to hammer home the semantic meanings of the tags since it's clear grade school grammar classes haven't been doing their job since the 1970's.
But yeah, TLDR version? Go ahead, it's fine. In fact I -- and many others -- highly recommend ignoring those tags altogether.