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