If you want to build a website, you need a good understanding of HTML.
HTML is the foundation of every web page. It is how we structure the content on a web page into important parts like headings, paragraphs, lists, tables, and so on. Compared to computer languages like JavaScript, Python, and C, HTML is pretty easy to read and understand. It is basically a combination of English words/sentences with extra symbols/syntaxes.
This simple guide walks you through what HTML is and explains some HTML syntaxes.
Let's get right into this.
What is HTML?
Founded in the late 1980s by physicist Tim Berners-Lee, HTML is the language used to create web pages and applications. The term "HTML" stands for Hyper Text Markup Language.
"Hypertext" in HTML means text within a text. It is a way of linking two or more web pages in an HTML document. When you click on a link in HTML, this redirects you to a new page referenced by that link. Think of hypertexts in HTML as hyperlinks in content/articles. And just as hyperlinks redirect you to other parts of the page or another content, hypertext in HTML redirects you to a new webpage.
Moving on, Markup language is a distinct computer language that defines the layout of content or text using specific syntax and formatting. These syntaxes are not displayed on the web page rather they work behind the scenes to create meaningful text on a web page. With Markup Language, you can easily convert text to images, lists, links, and tables.
NOTE: HTML is not considered a programming language like JavaScript, PHP, and Python. This is because it cannot be used to create dynamic functionality.
HTML Page Structure
A typical webpage has these three basic structure:
Heading: the title of the page, telling the reader what the page is all about.
Body: contains a detailed explanation or information about the title.
Footer: usually includes a call to action, contact information, or resources for other documentation.
Subsumed within the body structure are other structures like lists, tables, and bullet points.
In the same vein, the HTML page structure follows this typical format:
<html> <head> <title> This is the title of the documentation </title> </head> <body> <h1> My Document Heading </h1> <p>Detailed explanation of the title and headings </p> </body> </html>
But before you write out this structure, it is important to add these special codes<!DOCTYPE html> <html lang = "en"> </html>
<!DOCTYPE html> defines the type of document you are writing and tells the browser to adopt the latest version of HTML. <html lang = "en"> defines the language used in writing the code. Here, the adopted language is English and is represented by the abbreviation "en."
Note: your HTML text should be written inside the HTML code you entered after the <!DOCTYPE html> syntax just like this:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>title this documentation</title>
</head>
<body>
<h1>This is my first heading</h1>
<p>My first paragraph</p>
</body>
</html>
Note: you don't necessarily need to write another heading after the title of the HTML page. You can start with your paragraph if you don't have an additional heading.
How to Write HTML
HTML is pretty much easy to write when compared to other computer languages like JavaScript and Python. It is basically made up of syntaxes or symbols and meaningful English text.
The major building blocks for HTML are tags, elements, and attributes.
HTML Tags
The starting point of any HTML code is the tags. They are used as containers to define the appearance of HTML elements. For instance, there are tags for headings, paragraphs, lists, and tables. HTML tags are represented with the angle bracket sign <>.
For headings, the tags used to represent this include:
<h1> this is heading one </h1>
<h2> this is heading two </h2>
<h3> this is heading three </h3>
<h4> this is heading four </h4>
<h5> this is heading five </h5>
<h6> this is heading 6 </h6>
Note: the HTML angle bracket symbol for closing the section of an HTML text is always followed with a slash symbol after the less-than-angle bracket symbol. This marks the close of a specific tag function. Without this, you might not achieve the correct output.
HTML Paragraph Tags
Like the heading, paragraphs in HTML also begin with the tag which tells the browser that the HTML element should appear as a paragraph. HTML paragraph allows you to structure the content of your web page into a more seamless and engaging read. Once again the tag starts with the opening tag <p> and ends with the closing tag </p>. Here is the structure for paragraphs in HTML
<p> this is the first paragraph</p>
<p> this is the second paragraph </p>
<p> this is the third paragraph </p>
<p> this is the fourth paragraph </p>
HTML Table tags
Creating a table with HTML is a little more technical than the heading and paragraph tags. The table tag starts with the opening tag <table> and ends with a closing tag </table>. However, when creating a table in HTML, there are separate tags for table headers, rows, and columns, all subsumed within the table tag.
<th></th> defines the table header
<tr></tr> defines the table rows
<td></td> defines the content or data inside the table.
Here is an example of a typical HTML table
Note: the border = "1" attribute defines the desired number of borders for the table. Without this, there would be no border demarcations between the text in the table. More about the HTML attribute will be explained as we progress.
HTML List tags
There are two major kinds of lists on a webpage: numbered and bulleted. In HTML, the numbered list is referred to as an ordered list and represented with the tags <ol> </ol>, while the bullet list is referred to as an unordered list and represented with the tags <ul> </ul>.
The tags <li> </li> are used to mark the beginning and end of a list and show that the text is to appear as such. Here is an example of numbered and bulleted lists in HTML
HTML Images tags
HTML image tags are a little different from all the tags we have explored so far. This is because, unlike the other tags we have explored, the HTML image tag does not feature closing tags. Tags like this are referred to as empty elements. As such, all the necessary codes to embed an image in an HTML document are written inside the opening tag.
Beyond this, images in HTML also contain attributes of the image URL or file path and the image alt text.
The go-to tag for the HTML image is <img>. Here is how this is used.
<img src=”url” alt=”some_text” style=”width:width;height:height;”/>
Having explained what HTML tags are and explored some basic HTML tags, the next HTML building block to examine is the HTML element.
HTML Element
The HTML element is made up of opening and closing tags, the characters in the tags, and the content in between the tags. Elements without the closing tags are referred to as empty elements.
As such, it is safe to say, that headings and paragraphs are HTML elements as they are made of opening and closing tags, with content in between the tags. In contrast, an empty element (with no closing tags) either contains attributes or no content at all and often occurs within existing HTML elements that begin with opening and closing tags.
Empty elements are often used to embed images or links on a webpage. A good example is the image element <img> used in the previous example. Note that the image tag does not have a closing tag rather the slash sign is written before the greater than sign in the opening tag.
Nested HTML Element
The explanation so far has shown that in creating the content of a web page with HTML, we use various HTML elements. These elements can have other elements within them. For instance, inside a paragraph element, we can have bold, italics, emphasis, and strikethrough. The act of writing elements inside an existing HTML element is referred to as nesting. Let's look at some examples to see how this works:
In the above example, we have the div element. Inside this element is an h4 element and an ordered list element. Inside the ordered list are three lists of fruits. This is pretty much how nesting works in HTML. Here is a diagram of the nested elements in our example:
Now that we have a basic understanding of HTML tags and elements, the last HTML building block to examine is the HTML attributes.
HTML Attributes
The HTML attribute provides additional information about the HTML elements. It is used to modify the behavior of elements and is usually entered in the opening tag. While all HTML elements have tags, not all have attributes. Most HTML attribute has a name and a value, ie name = value.
For example, in adding an image to an HTML file, you will first provide the HTML tag <img> for the image and go ahead to write out the source attribute which is usually the image URL or file path. Without this, the browser will not recognize the image to render. Here is how a typical HTML image text is written
<img src="https://assets.codepen.io/296057/lil-hplus-bargraph_1.png"/\>
In a code editor, here is the result:
Another important attribute often entered after the source attribute in the image element is the alt text, ie, the image alt attribute.
Although without the image alt attribute, the browser will still render the image once the URL or file path is assigned to the source attribute, it is advisable to add this, especially because users with low vision might find the image difficult to understand without the alt text. Here is the same image above with the alt text:
Aside from the source and alt attribute for image elements, there is also the anchor element used to create hyperlinks. When writing out this element, it is essential to include the href attribute which specifies the link destination. Here is how the hyperlink is written in HTML:
<a href = "hplussport.net" /target="_blank"> fine website </a>
In a code editor, here is the result:
Conclusion
Basically, the three HTML building blocks explored so far are the major HTML codes used in creating meaningful text on the web page. And from the explanation, HTML is pretty much easy to write and understand.
However, to make your website functional and aesthetically pleasing, you need to study CSS and at least one programming language.
Check out this article on How to Create the YouTube Subscribe Button with HTML and CSS.
Stay happy coding, and see you in future posts 👋.