Chapter 1: Getting started with HTML
If one has always thought of HTML as just some form elements, div and span elements, links and paragraph tags, it seems strange that one would dedicate an entire book to the language. As you will see throughout this book, there is a lot more to the HTML language.
What is HTML?
HTML stands for Hyper Text Markup Language and has been at the core of the web since its very inception in 1989. It forms the bases of all things on the web no matter how simple or how complex. Without HTML, there are no webpages or applications. HTML also provides the semantic structure of our documents and applications and this is where knowing the language really pays off. Semantic structure is also critical when it comes to the accessibility of your documents, a topic I will cover throughout the book.
There is a lot to HTML and some aspects of the language such as canvas can take up an entire book on their own. For some topics such as this I will provide an overview and then provide resources for further reading.
The html
element
We will start with the first element in every HTML document, the html
element.
What about the
DOCTYPE
? That is a good question. While theDOCTYPE
is the very first entry in our HTML documents, it is in fact not an HTML element. The sole purpose of theDOCTYPE
is to ensure that the browser does not switch into what is commonly known as quirks mode, but instead, makes a best effort attempt at following the relevant specification. I say, “best effort attempt”, as not all browsers have implemented the entirety of the HTML specification. This is especially true of older browsers and so, these browsers will do their best to interpret the language and use a fallback where it does not understand the specific syntax.
The DOCTYPE
is required for all HTML documents and takes the following form:
There is an extended legacy form, but the above is all that you will ever need to be concerned with.
Now that the browser knows that what follows will be HTML, we start our document with our root element.
lang
Being at the root of our document, there is one attribute that should always be set on the html
element. The lang
attribute on the html
element indicates the primary natural language the document is written in. It also assists speech synthesis tools in what pronunciations to use, and helps translation tools select the rules they should apply. This is critical for the overall accessibility of your documents. It takes the following form:
Should you not want your entire document to be localizable through translation tools, you can specify the translate
property, setting its value to no
:
The head
element
The head
of our HTML document contains metadata about the document. So what is metadata? In short, it is “data about data”. Not all metadata lives in the head
though, and not all metadata that lives in the head
is necessarily descriptive, more on this later.
The title
element
The first piece of metadata we will add to our webpages is the title
tag. Seems like such a simple element, and it is, but while simple, it is critical to orient a user. The title
uniquely identifies the current page in the browser’s history, is the first piece of information read to users using screen readers; is the title shown to users in search results, when sharing on social media, and is crucial for SEO(search engine optimization).
With that said, keep the following guidelines in mind when writing your title:
- Be concise when writing your titles and aim to keep the total character count at around 60.
- Remember that document titles should make sense when read out of context.
See the web content accessibility guidelines (WCAG) for more information on providing descriptive titles for web pages.
For example, the title for this chapter would read:
The title
tag does not have any special attributes but supports all the global attributes, one of which is translate
. Using this attribute, you can prevent translation tools from localizing your page title.
Why would you want to do that? Your page title could be the title of a poem or a song. In those cases you do not want the title translated. For example:
Here, it would also be prudent to add a lang
attribute indicating the primary language used in the title
tag. As mentioned earlier, this will assist speech synthesis tools in what pronunciations to use. For example:
The base
element
The base
element is a void
element ans as such is written as a self-closing tag. This means that, while a lot of tags in HTML are written as follows:
A self-closing tag is written like this:
Note: The HTML specification states that
void
elements should be written without the forward slash at the end of the tag, but tools such as Prettier will add it by default. There is also no way at the moment to disable this. There is additional complexity here due to most modern frameworks who use JSX, or JSX like syntax, requirevoid
elements to use the forward slash. To avoid confusion and follow the practice you are most likely to encounter in other codebases, I will stick with using a closing forward slash.
I will start the discussion of this element with a caveat. While this element is still part of the specification, in all of my time building for the web I have not once had a need for this element. That is not to say that there is not a use case, but I would be careful in using it, especially concerning using the target
attribute. Always respect the user’s choice first and do not force a browsing context, unless it is absolutely needed.
With this important context stated, let’s discuss what the base
element does.
The base
element allows you to set a base URL for all links on the current page, set a base browsing context, or both, for all elements with a href
or target
property on the page. Let’s look at an example.
All of those links share the same base URL. Using the base
element, you can avoid repeating the base URL in every link tag:
Now, you may also want those links to always open in a new tab (browsing context). One option is to do:
As mentioned, there is a second attribute you can set on the base
element, and that attribute is the target
attribute. We can therefore avoid repeating target
:
NOTE: Be careful here as this could negatively impact the user experience and accessibility as there is nothing indicating to the user that all links will open in a new window or tab. While not a blanket statement, I generally prefer to leave the choice of whether a link should open in the same or a different tab or window up to the user.
With the above in place, all elements with a href
attribute on the current page will use https://www.googreads.com
as its base URL and all elements with a target
attribute will open in a new tab. You might have noticed that I did not say links but elements, that is because not only anchor tags affected but all elements with a href
(or target
) attribute are affected. For example:
In the above scenario, the browser will attempt to load the stylesheet from the Goodreads website, which might not be what you intended. Thankfully, the base
element only affects elements below it in source order, so changing the above as follows will solve the problem:
Some final notes on the base
element. There must be no more than one base
element per page. If there are multiple, all but the first will be ignored. As with href
, all elements that have a target
attribute set are affected by the value of the target
attribute of the base
element. This means that forms with a target
will also be affected.
It is also helpful to know the parsing algorithm as it could clear up any surprising outcomes you may encounter.