./ STORIN.NL \.

[BLOG] | [TEXT VERSION] 15 November 2024
Storin t'Kel                                                  2024-02-27
HTML: Common Mistakes                                       version 0.98
Informative                                                         Blog

Table of Contents

    1.  Introduction
      1.1.  First of a series of posts
      1.2.  What is it not for?
      1.3.  What is it for?
    2.  rickcarlino.com
      2.1.  HTML or XHTML Declaration?
      2.2.  Language of website
      2.3.  Self-closing element tags
      2.4.  Images alternate text
      2.5.  Javascript type/text
     3.  Afterthought
     4.  References


1.  Introduction                                                   [top]

1.1.  First of a series of posts                                   [top]

   Welcome to a new series of posts in regards to the proper use of
   HTML and CSS. I hope to create a series of posts about this
   fascinating subject that is often overlooked and seen as unimportant
   by many people, but little do they know that the proper use of HTML
   or XHTML or CSS of any level is actually mandatory for any website.
   Now many people are using a CMS, and more often than not these CMS
   products make improper use of HTML, XHTML and CSS and often just
   mixes one up with the other. This is just plain wrong and foolish to
   do and it shows little care about these companies in regards to the
   most basic elements of web-design.

1.2.  What is it not for?                                          [top]

   This is NOT a series of posts of bash other people or to bash their
   creations!!!! Let me be very clear about this. In fact, I suggest
   you take this as a tongue-in-cheek post attempting to correct
   people.

   So it is not to bash anyone, it is not to be negative about the
   looks of websites, it is only about the use of HTML and CSS, nothing
   more and nothing less. The sites I am using in these posts are
   actually awesome looking websites of owners who understand what
   websites should look like. So think of it using the best of the best
   as an example that even the best have flaws.

1.3.  What is it for?                                              [top]

   This topic is for those who are serious in creating websites and
   coding it themselves by hand and who require live examples in order
   to understand the subject at hand. For this reason I will not
   address the HTML/XHTML and CSS subjects at the same time, I instead
   will do one at a time.

   This is for those who, like myself, check their codes using the W3C
   HTML[1] and W3C CSS[2] validators to ensure that their code
   implementation is correct and from there on they continue to design
   their websites.

   At the same time I hope the owners of the mentioned websites will
   look at these posts and correct the minor flaws, rendering the posts
   in question useless.

2.  rickcarlino.com                                                [top]

2.1.  HTML or XHTML Declaration?                                   [top]

   If we look at the website of Rick Carlino[3] we see an awesome
   website that is mainly text based, offering awesome posts! Having
   said this, I do urge anyone to visit the site. But let's look under
   the hood and look at the code. I strongly suggest to visit his
   website and look at the source yourself.

   <!doctype html>

   This tells us that it is a HTML5 living standard HTML document. Any
   previous version has a doctype declaration similar to the one in my
   own source code. With this the browser understands that the website
   in question should be rendered in the HTML5 standard codes. In the
   case of my own website the doctype declaration states that any
   browser should render the page as XHTML 1.0 Strict and within it
   offers a link to the dtd file on w3.org[4] to recognize and check
   what is allowed and what not.

2.2.  Language of website                                          [top]

   Not unimportant is the following, now that we know what type of
   document it is, and this is the language used on a website.

   <html>

   Here is the first warning within the W3 HTML validator. Within the
   HTML tag we should declare the overall language of the website.

   <html lang="en">

   This, in HTML5, is the proper language declaration and it obsoletes
   a different line we discover in the Head Elements.

   <meta http-equiv='content-language' content='en-us'>

   This was used in versions prior to HTML5 to tell the browser which
   language was being used on the website. Since HTML5 this has been
   obsoleted and therefore it is no longer required.

2.3.  Self-closing element tags                                    [top]

   So here is a tricky one. One of the differences between XHTML and
   HTML is that in XHTML you close some tags with /> where in HTML >
   would suffice in some of the tags.

   The document is declared HTML5 which means that we do not do this:

   <link href="/stylesheets/normalize.css" rel="stylesheet" />

   Instead we do this.

   <link href="/stylesheets/normalize.css" rel="stylesheet">

   It is really a minor thing, but it still is a warning in the HTML
   validator of W3C and with this it is something that should be
   addressed. Do not see this as the check engine light in the car of
   Penny. (let's see who gets this :P)

   In any case, all that ends in /> is no longer valid in HTML5 and
   therefore these closing methods should be addressed as such. Given
   that the website is created with a CMS, the code of the CMS should
   be changed to adapt to HTML5 instead.

   At the bottom of the page you'll also see something else of
   interest.

   <hr/>

   Since it is an HTML5 document, you do not have to close it as it
   does this by itself.

   <hr>

   Should therefore suffice.

2.4.  Images alternate text                                        [top]

   Every image should have an alternative text and this is done to make
   the website accessible for the visually impaired and blind visitors.

   <img src="/images/header_portrait.png">

   should therefore become

   <img src="/images/header_portrait.png" alt="Handsome man">
   
   I will admit that this is total nitpicking as the other images all
   have alt tags in them.

2.5.  Javascript type/text                                         [top]

   In HTML5 we do not longer need to declare what type the tag is.

   <script type="text/javascript">

   should therefore become

   <script>

3.  Afterthought                                                   [top]

   Writing this document felt a bit uneasy for me as I decided to use a
   different website as an example, making it feel like I am one of
   those Reaction Video people who all they can do is to bash others.

   Of course nothing could be further from the truth. I realized
   quickly that by using a different website, I had to completely focus
   on what I saw in both validator and my own observations. I mean, the
   website itself is awesome, I mean it even looks good in the Lynx [5]
   browser!

   I realized that I was nitpicking on that which I saw and offered
   solutions on the HTML side of things. For the sake of this document
   I decided not to add the CSS warnings. One step at a time.

   In the case of the website of Rick Carling, I would say that XHTML
   1.0 Transitional and CSS Level 2 would suffice in order to keep
   things as simple as they are, especially on a website like the one
   he created.

   Having said this, I hope that my simple explanation by showing
   examples has been helpful to you. I also hope that this document
   makes clear that I am personally not at all against any other form
   of HTML than the one I have been promoting on this website. To know
   one, you have to know the other as well and within this one should
   dare to work within the limitations in order to grow.

   Have a great day!
   - Storin t'Kel


------------------------------------------------------------------------
4.  References                                                     [top]

   [1]   https://validator.w3.org/
   [2]   https://jigsaw.w3.org/css-validator/
   [3]   https://www.rickcarlino.com/
   [4]   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd