I created websites at a time when CSS didn’t exist. The basic tool for arranging content on the page was a table. At the time, I thought web development was difficult because the monitor sizes ranged from 13 inches to 22 inches, and on each of them the page looked different. Then CSS came along and made me stop understanding how to organize the content on the site. Perhaps it happened because I could not wrap the content on the page in appropriate HTML tags. Today I know that this is a big oversight on my part. Fortunately, there are organizations that issue guides where they indicate how to use HTML code.
HTML history
Historically, the first organization to address the subject of publishing HTML standards was the W3C. In 2004, a split arose in this organization and a second organization appeared dedicated to the establishment and popularization of HTML standards – WHATWG. Currently, the W3C publishes the basic principles of using HTML, while WHATWG is focused on the “manufacturers” of web browsers and is more concerned with new implementations of HTML. In this post, I will show you what information you can find in the HTML 5 standard published on the https://www.w3.org/TR/html52/index.html
Let’s start with the fact that every document written in HTML should have a tree structure divided into two parts: HEAD and BODY.
HTML Head
In the HEAD part, we put the main information about the site. In BODY we place the content of the site that will be displayed to the user. When developing a document in HTML, we have at our disposal elements, attributes, and attribute values that allow us to manage the content. The content itself can be divided into several categories:
- Metadata – allows you to configure the behavior of content on the page, and determine the relationship between the currently displayed content and other content on the website.
- Flow content – most of the elements used on the website in the BODY section belong to this category.
- Sectioning content – defines the range of headers and footers, e.g.: article, aside, nav, section.
- Heading content – defines the section header, e.g.: H1, H2, H3, etc.
- Phrasing content – defines text at the paragraph level, e.g.: a, br, ins, img.
- Embedded content – imports something from another source into the document, e.g. audio, canvas, iframe.
- Interactive content – is used to conduct interaction with the user, e.g. button, input, select.
HTML structure
We define the structure of an HTML document through elements. The W3C guidelines include the following types of HTML elements:
- Metadata
- Sections
- Grouping elements
- Elements that characterize the text
- Editing
- Embedded content
- Multimedia elements
- Links
- Tabular data
- Forms
- Interactive elements
- Scripts
Not only that, in each group of elements there are a lot of specific types of elements, e.g.: blockquote, ol, li, dl, dt, figure, main, etc. Getting acquainted with the richness of HTML, it turns out that a large part of the work on the appearance of the page can be done using HTML and, you do not have to immediately pull CSS for simple text formatting. For example, there are fourteen types of links alone.
The recommended way to build the structure of the document is not all that you can find in the W3C guide. It also refers to the interactive elements of the site, including the use of the drag-and-drop system and how this system can be used by hackers. It contains large chapters on how web pages load in the browser, how to use the API, or how to prepare an XML document.
With a lot of knowledge, it is impossible to remember the whole. Fortunately, the guide is constructed in such a way that it is easy to move in it. When you forget something, you will surely easily find guidelines for the use of the indicated HTML code element.
HTML Validator
There is also a very helpful tool on the W3C website to check the quality of the HTML code that you have written. Validator is available at https://validator.w3.org/ and you can simply point him to a link to the page, upload a file with the code, or paste the code directly into the browser. The test will be carried out instantly and after a while you know if the code has been prepared in accordance with the W3C recommendations.
To sum up, I have not paid much attention to the SYNTAX of HTML-created web pages so far. I limited myself to a few basic elements of the HEAD section: the correct character set, font, language and that’s it. The rest is in CSS. Today I know that this is an unnecessary complication of the matter. Not only that, the code is less readable and more difficult to maintain. This, in turn, means that, for example, screen readers can not cope with reading such a page. Personally, I intend to follow these guidelines, although it will probably take me a lot of time to fully get to know them. I also encourage you to read the W3C documentation.