Semantic Web

I want/need to read up on and understand the Semantic Web. This uses all sorts of interesting HTML 5 tags. I am not totally sold on this, as you will see. I can do much if not all of this of this with div and span tags.

Is this text red? If it is, your browser just accepted my new pseudo-tag bunnyrabbit. I defined its colour in my stylesheet. Your browser accepted my definition, and did not reject my silly HTML tag. Let's see what else I can do with HTML 5.

Semantic Web Tags

header
The top of your document.
section
Divide your HTML file into sections. You can nest your sections, as I have done in this document.
nav
Set up distinctive links for navigation.
aside
This is being visualized as a sidebar.
article
Define a block of objects in your HTML file as an article.
footer
The bottom of your document.

More Interesting Tags

template
fieldset
Set up forms.
legend
This is placed insite a fieldset tag.
sub
picture
This might be an interesting tag. Research it!
datalist

Section 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.

Sub-Section

Note how I have used an h1 tag at the top of this sub-section.

Sub-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.

Another Sub-Sub-Section

Here is another sub-sub-section embedded within the sub-section.

Another Sub-Section

What it says!

Article Tag

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.

Does this even work?

I have tested this page on W3C's validator. 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 div 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 span tag. 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?

Test More Tags

Let's test all those extra tags.

Fieldset and Legend tags

I copied the following form from W3C Schools.

Personalia:







This form is using br tags. The tag really ought to be shown as /br. I hate using /br tags.