Introduction
HTML is a really simple, yet expressive markup language. As we saw in the last chapter, HTML Get Started, creating an HTML page isn't at all a difficult feat; it's extremely easy.
In this chapter, we aim to understand some of the basic ideas of HTML to build a good foundation to take it from here to the upcoming chapters of this course.
In particular, we'll learn more about HTML tags; a hands-on experience of HTML attributes; how to set the title of a document; some common meta info; some more HTML elements; and so on. No doubt, there's a lot to learn but it's all really easy to get the hang of, and with learning comes knowledge that drives excitement.
So without further ado, let's dive right in.
Elements and tags
In the previous chapter, we explored elements and tags in some detail. Now, we shall get into even more detail and understand all that we need to learn about them.
Essentially, a tag, or a set of starting and ending tags, is used to represent an element in HTML.
But what exactly is an element?
Elements are rightly the very core of HTML. They are the building blocks of HTML.
Now there are two kinds of elements:
- Those with a starting tag and an ending tag; these are commonly referred to as container elements, as they 'contain' content within them.
- Those with just a starting tag and no ending tag; these are referred to as non-container elements, or sometimes even as void elements.
Examples of container elements include <html>, <head>, <body>, <h1>, etc. Examples of non-container elements include <br>, <img>, <input>, <link>, etc.
Now, let's define what is a tag.
A tag begins with the < symbol and ends with >. The ending tag, if there's exists one for an HTML element, additionally contains a forward slash (/) after the < symbol.
Inside the tag, we have the name of the element. This name is case-insensitive, i.e. the tags <html>, <HTML> and <Html> are all identical. However, as per the norm, it's advised to stick to lowercased tag names, i.e <html>.
In the last chapter, we saw the elements <html>, <head>, <body>, and <h1>.
Let's now see a couple other commonly-used HTML elements:
- The
<p>element is used to denote a paragraph. - The
<a>element is used to denote a hyperlink in HTML — the crux of the markup language. - The
<title>element is used to define the document's title (we'll see it later below).
In the following code, we create an HTML page, with a heading and a paragraph:
<!DOCTYPE html>
<html>
<body>
<h1>Playing with HTML</h1>
<p>HTML is pretty easy, isn't it?</p>
</body>
</html>Notice how the paragraph element comes after the heading element in the source code. The <p> element isn't contained in <h1>; instead, it's adjacent to it.
Following is the output produced:
HTML is pretty easy, isn't it?
Document title
When you search for a webpage on search engines such as Google, the results displayed have certain title text for every matching webpage.
An illustration follows:
This text can also be seen on the browser's tab panel, on the bar representing the underlying webpage.
In both these examples, what we're talking about is the document's title. It's given by the <title> element.
If you give it a thought, <title>, as it's not rendered out visually on an HTML document, it's not supposed to be a part of <body>; instead, it goes in <head>.
<head> element.Moving on, <title> is a container element, i.e. with a starting tag (<title>) and an ending tag (</title>), containing the title text within it.
In the following code, we extend our previous HTML page with a document title, reading the same text as the one in the <h1> element:
<!DOCTYPE html>
<html>
<head>
<title>Playing with HTML</title>
</head>
<body>
<h1>Playing with HTML</h1>
<p>HTML is pretty easy, isn't it?</p>
</body>
</html>Open up this HTML page in the browser and notice the title displayed on the tab panel.
As stated earlier, and now to stress on it again, <title> is a vital component of all webpages.
It's used by search engines as the heading to display in SERPs (Search Engine Results Pages) for each matching webpage and to even comprehend the content of the webpage (amongst the hundreds of ways of comprehending it).
Attributes
Often times, we want to add additional information to an HTML element, where that information is not necessarily meant to be represented using another element.
For example, we might want to add the language of an HTML document, such as English, or maybe Spanish. Or we might want to specify the URL of an <a> element. Or we might as well want to add a unique ID to a <p> element (we'll see what this means later on in this course).
And so on and so forth.
This additional information of an element goes into the attributes of the element.
It consists of two things: the attribute's name followed by its value. The general form is: name="value", where the value is encapsulated inside a pair of double quotes ("").
Here are some points to note regarding HTML attributes:
- Attributes go inside the starting tag of HTML elements.
- An HTML element can contain as many attributes we one wants.
- The same attributes can be repeated on an element although it's not really common or sensible to do so.
Let's take an example of an attribute, specifically of the very first attribute added to the HTML in its very early days.
The <a> element represents a hyperlink — or simply a link — in HTML.
A hyperlink essentially points to another location, and that's essentially what hypertext is meant for — to create interactive text.
What is meant by the 'a' in <a>?
The 'a' in <a> stands for 'anchor'. Let's see where it comes from.
A hyperlink is sometimes also referred to as a hypertext anchor, or simply an anchor. This is because it's something that literally anchors, i.e. connects, two webpages, or two parts of webpages, together.
Moving on, a hyperlink is clickable, whereby clicking on it navigates the browser to a given location. This location is given by a URL and goes into the href attribute of the <a> element.
href stands for 'hyper reference' and serves to define the reference of a hyperlink, i.e. the resource that it refers to.
It can either point to a local resource on the underlying file system or to a remote resource across the wire. It can even point to a telephone number, or an email address.
href attribute in the HTML Hyperlinks chapter.For a remote resource, we need a fully-qualified URL, such as https://www.google.com/. The https part (known as the scheme of the URL) is important here.
Coming back to the <a> element, where its href attribute denotes the resource it points to, the text rendered out on the page for the link is given by the content inside the <a> element (yeah, <a> is also a container element).
Let's take an example to help understand all of this.
In the following code, we add a hyperlink inside a paragraph, pointing to our landing page, codeguage.com:
<!DOCTYPE html>
<html>
<head>
<title>First hyperlink</title>
</head>
<body>
<h1>First hyperlink</h1>
<p>Let's go to the landing page of Codeguage: <a href="https://www.codeguage.com/">www.codeguage.com</a></p>
</body>
</html>Here's the output we get:
Let's go to the landing page of Codeguage: www.codeguage.com
See the generated, interactive hyperlink, colored blue? Hover over it (i.e. take the mouse pointer over it) and you'll notice the pointer icon changing to a pointing hand and the link's text being underlined. This indicates interactivity.
Click on the link and you'll be redirect to Codeguage's landing page.
Perfect!
The text of an <a> element can be anything. Below, we demonstrate this:
<!DOCTYPE html>
<html>
<head>
<title>First hyperlink</title>
</head>
<body>
<h1>First hyperlink</h1>
<p>Let's go to the landing page of Codeguage: <a href="https://www.codeguage.com/">Landing page</a></p>
</body>
</html>Here's the output we get:
Let's go to the landing page of Codeguage: Landing page
Everything is the exact same as before, just that the text of the hyperlink has been changed from 'www.codeguage.com' to 'Landing page.'
Over the course of the upcoming chapters, we'll get to discover a wide variety of HTML elements and their attributes.
Coding style guide
Whenever a person begins learning anything new, it's crucially important to follow best practices and develop good habits in the early days.
For coding in HTML, while the language is not that strict in its ruleset, it's regardless still fruitful to develop a good coding style so that you can continue that on once you learn another language on the web.
In this section, our aim is to go through a decent enough coding style guide to follow while writing HTML so as to ensure clean and readable pieces of code.
Lowercase tag names
We stated this earlier and would now do it again: use lowercase tag names in HTML.
Even though it's possible to use tag names with any casing, i.e. as <HTML> or <Html> (as they are case-insensitive), the standard is to use lowercased names.
Hence, the following code isn't desirable:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Coding style guide</TITLE>
</HEAD>
<BODY>
<H1>Coding style guide</H1>
<P>Just learning some good coding conventions.</P>
</BODY>
</HTML>The one shown below is desirable:
<!DOCTYPE html>
<html>
<head>
<title>Coding style guide</title>
</head>
<body>
<h1>Coding style guide</h1>
<p>Just learning some good coding conventions.</p>
</body>
</html>Indent nested elements
Nesting is an intrinsic part of HTML. You'll always do it, no matter what's the complexity of the HTML you're writing.
While nesting elements, it's desirable to put the nested elements on separate lines and also indent them to make the code look much more readable and neat.
Here's some poorly written HTML:
<!DOCTYPE html>
<html>
<head><title>Coding style guide</title></head>
<body><h1>Coding style guide</h1><p>Just learning some good coding conventions.</p></body>
</html>While here's the same HTML with effectively spaced out nested elements:
<!DOCTYPE html>
<html>
<head>
<title>Coding style guide</title>
</head>
<body>
<h1>Coding style guide</h1>
<p>Just learning some good coding conventions.</p>
</body>
</html>As we shall learn sooner in this course, it's not always desirable to put nested elements on a new line along with indentation.
Moving on, regarding indentation, there's a frequently asked question as to whether <head> and <body> should be indented inside <html> or not. We address this below.
Indenting <head> and <body>
While most commonly, following the indentation rule specified above, you'll see the <head> and <body> elements indented inside <html>, if you want to, you can omit the indentation solely for these two elements.
That is, instead of having HTML as follows:
<!DOCTYPE html>
<html>
<head>
<title>Coding style guide</title>
</head>
<body>
<h1>Coding style guide</h1>
<p>Just learning some good coding conventions.</p>
</body>
</html>you can have it as follows:
<!DOCTYPE html>
<html>
<head>
<title>Coding style guide</title>
</head>
<body>
<h1>Coding style guide</h1>
<p>Just learning some good coding conventions.</p>
</body>
</html>with the indentation of <head> and <body> removed.
The reason is because we already know that <html> can have two and only two children, <head> and <body>. Two isn't that big of a number and, likewise, even if we don't indent <head> and <body>, the readability of the code, more or less, remains the same.
We personally prefer this approach and would use from now on, whenever specifying a complete HTML document.
Remove spaces between attribute name and value
When it comes to attributes in HTML, make sure that they are written precisely as follows: name="value", where name represents the name of the attribute and value represents its value.
There should be no spaces in between the name, the equals sign (=), and the value.
Likewise, the following <a> elements aren't good:
<a href= "https://www.codeguage.com/">Visit Codeguage</a>
<a href = "https://www.codeguage.com/">Visit Codeguage</a>Notice the spaces after = and the href attribute in the code above; these shouldn't be there.
Here's the improved code:
<a href="https://www.codeguage.com/">Visit Codeguage</a>
<a href="https://www.codeguage.com/">Visit Codeguage</a>Quote attribute values
Extending what we learnt above regarding working with attributes, also ensure that the values of attributes in HTML are quoted.
Even though it's not syntactically invalid to have an unquoted value, as follows:
<a href=https://www.codeguage.com/>Visit Codeguage</a>it's not a recommended approach, as in some cases, it can lead to issues.
For example, if the value itself contains spaces, the HTML parser has absolutely no way to be able to distinguish the value of one attribute from the name of another.
An illustration follows:
<a href=https://www.example.com/?q=HTML books>Search for 'HTML books'</a>The ?q=HTML Books portion in the code above is all part of the URL (although it's not what we'll typically call a well-formed URL). However, because we haven't quoted the href attribute, the parser thinks that the value of href ends right at q=HTML and that books is another attribute.
books is being treated differently than the value of href. This is the benefit of code coloring — it helps us to quickly visualize errors in code.Henceforth, we must quote all attribute values:
<a title="https://www.example.com/?q=HTML books">Search for 'HTML books'</a>Moving on, in HTML, quoting attributes can be done either using a pair of double quotes ("") or, equivalently, using a pair of single quotes ('').
As per the convention, we must stick to using double quotes (""), NOT single quotes ('').
So instead of the following:
<a href='https://www.codeguage.com/'>Visit Codeguage</a>we must have this:
<a href="https://www.codeguage.com/">Visit Codeguage</a>And this is pretty much the basic coding style guide that we should adhere to for the rest of our journey of working with HTML.
There can be many other points added to this style guide but based on what we've learnt so far in this course uptil now, it's quite a sufficient guide.
