Introduction
To build a website, you need a good understanding of HTML.
HTML is the foundation of every web page. It structures content into important parts like headings, paragraphs, lists, and tables. Although HTML is not a programming language like JavaScript, Python, or C, it plays a crucial role in software development. The good news is that HTML is easy to read, learn, and understand because it uses a mix of English words and symbols.
If you are just starting your technical writing or software development journey, this simple guide will walk you through what HTML is and explain some basic HTML syntax.
Let's get started.
What is HTML?
HTML is the language used to create web pages and applications and was founded in the late 1980s by physicist Tim Berners-Lee. 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. Just as hyperlinks redirect you to other parts of the page or another content, hypertext 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
In HTML, a typical webpage has three basic structures:
Heading: The title of the page and other important sections.
Body: The explanations or information related to the title. The body uses various HTML structures, such as paragraphs, lists, tables, and bullet points, to convey information.
Footer: Often includes a call to action, contact information, or links to additional resources and documentation.
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. The adopted language represented by the abbreviation "en" is English.
After you have included these special codes, you can now write out your HTML text following the webpage structure explained above. Here is an example:
<!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: If you don’t have any additional heading after the title of the HTML page, you can start writing the body of the page with your paragraph.
How to Write HTML
The major building blocks for HTML are tags, elements, and attributes. Let’s get into the explanation of each block.
HTML Tags
HTML tags are the starting point of any HTML code. 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 <>.
HTML Heading Tags
For headings, the HTML tags used are:
<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>
Result:
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
HTML paragraph allows you to structure the content of your web page into a seamless and engaging read. The paragraph tags also start with the opening tag <p> and end 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, there are separate tags for table headers, rows, and columns.
<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: there is a closing tag </table> below the page that is not captured in the screenshot. Also, the border = "1" is an HTML attribute used to define the desired number of borders for the table. Without this, there would be no border demarcations between the text in the table.
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. They 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. It doesn’t include closing tags. Rather, all the syntax to embed the image is written inside the opening tag. In HTML, tags like this are referred to as “empty elements.”
Also, images in HTML contain attributes like the image URL or file path and the image alt text.
HTML tag for image is <img>.
Here is how this is used:
<img src=”URL” alt=”some_text” style=”width:width;height:height;”/>
Note: the slash sign to close the image tag is added after you have entered the content of the tag.
Now that we have explored some HTML tags, the next topic in the HTML building block to examine is the HTML element.
HTML Element
The HTML element consists of opening and closing tags and the content that appears between them. Elements that do not have closing tags are known as “empty elements.”
For example, headings and paragraphs are considered HTML elements because they have both opening and closing tags, along with content nestled between them. In contrast, empty elements do not have closing tags, and they may either contain attributes or no content at all. These empty elements often exist within other HTML elements that have both 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>.
Nested HTML Element
So far, explanation 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.
See example below:
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
HTML attributes provide extra information about HTML elements. They are used to change how HTML elements behave and are included in the opening tag. While all HTML elements have tags, not all have attributes. Most HTML attributes have a name and a value, like name = value.
The source attribute in an HTML image tag is an example of an HTML attribute. To use this attribute, start with the HTML tag <img> and then include the source attribute inside the tag. This source attribute points to the image URL or file path. Without it, the browser won't know which image to display.
Here's how it looks in an HTML image tag:
<img src="https://assets.codepen.io/296057/lil-hplus-bargraph_1.png"/>
Another important attribute often added after the source attribute in the image element is the image alt attribute.
Note: Without the image alt attribute, the browser will still display the image once the URL or file path is set in the source attribute. However, it is recommended to add the alt attribute, especially because users with low vision might have difficulty understanding the image.
Result:
The last attribute to consider is the anchor element. This element is used to create hyperlinks in HTML content. It is represented with “href,” which specifies the link destination.
Here is how the hyperlink is written in HTML:
<a href = "hplussport.net" /target="_blank"> fine website </a>
Result:
Conclusion
The three HTML building blocks we've discussed are key elements used to create meaningful text on a web page. As we've seen, HTML is quite easy to write and understand.
However, to make your website both functional and visually appealing, you should learn CSS and at least one programming language.
Check out this article on How to Create the YouTube Subscribe Button with HTML and CSS.
Sappy coding, and see you in future posts 👋.