My page top heading and the first paragraph are enclosed within a header tag. I have not styled my header at all. I could do something weird if I felt like it. I could do the same thing with a div tag.
The section tag provides me a logical structure for organizing my document. I have methodically started each section with an h1 tag. I need the h1 tags to be smaller than the one at the top of the page. It must get smaller as I nest sections.
Note how each section is indented. I have specified this in my stylesheet. I only did this at one level. When I nest sections, browsers keep indenting.
Note how I have used an h1 tag at the top of this sub-section.
Here is a sub-sub-section embedded within a sub-section.
As noted above, I have programmed My CSS to indent the subsection. It controls one level of sub-section, but this indents all levels of it, as you can see.
Here is another sub-sub-section embedded within the sub-section.
What it says!
There now is an article tag. I can use this to specify the contents as a stand-alone article. I have no idea of how I should style this, or use it for that matter. I would need some sort of app to read the HTML code and extract the articles. Perhaps I can arrange articles in some sort of table format. I can do that now with the div tag.
I have tested this page on
I got back a bunch of messages telling me to
Consider using the h1 element as a top-level heading only
(all h1 elements are treated as top-level headings
by many screen readers and other tools).
In other words, I cannot systematically use the same heading
on each section.
My browsers resize the h1 tags
depending on what the section level is.
It does not do this with h2 tags.
The validator quite properly does not like
my bunnyrabbit tag.
The validator's error message is linked to notes pointing out that browser support is not reliable yet. This is especially true of "browsers" that support people who cannot read screen text. Semantic web is a cool concept, but like most cool stuff, it is five years in the future.
I am not sure of what all this accomplishes. Consider the following HTML code...
<div class="sidebar"> <h2>Threadlocker!</h2> <p class="warning"> Do not apply <span class="brandname">Loctite</span> to the fasteners of your printed circuit board. </p> <p> Threadlocker attacks the thermo-plastics that PCB components are made of. Use washers and a torque wrench. </p> </div>
In the code above, I am using
and span tags.
to manage arbitrary blocks of code.
I have also attached a class to a paragraph.
My classes are intelligently named.
Instead of HTML 5's semantic tags,
I use my own terminology that is meaningful to me.
I applied the class
brandname to a
I could have just as easily applied it to an anchor tag.
What happens if my first language and the language of my website
are something other than English?
Let's test all those extra tags.
I copied the following form from W3C Schools.
This form is using br tags. The tag really ought to be shown as /br. I hate using /br tags.