HTML Made Simple for Beginners

October 13, 2023

If you want to build a website or even learn about software development, one of the first language that you need to learn is HTML.

In this article, we are going to go through the basics of HTML. At the end, we are going to build a basic web app using only HTML.

What Is HTML?

HTML stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.

What Are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It’s wrapped in opening and closing angle brackets. The opening tag indicates where the element begins.

Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element’s name. Everything inside the opening and closing tags is the content.

But not all elements follow this pattern. We call those that don’t follow this pattern empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the page. so those element do not have any closing tag

<img src="images/nameofimage.png width="50" width="50">

In the example above, the <img> element only consists of one tag that does not have any content. T

How to Nest HTML Elements

To nest HTML elements, you simply place one element inside another. This is known as nesting. For example, you can nest a <p> (paragraph) element inside a <div> (division) element like this:

<div>
    <p>This is a nested paragraph.</p>
</div>

In this example, the <p> element is nested inside the <div> element. The <div> acts as a container for the paragraph.

Similarly, you can nest other elements inside each other to create more complex structures. Just make sure to close the elements in the correct order, following the hierarchy of the nesting.

Nesting can become more complicated as the page grows larger, so it’s helpful to plan and visualize the layout structure you want to achieve before starting to code. This can be done by sketching it out on paper or using a wireframing tool. Planning ahead will make the nesting process smoother and more organized.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

In the example below, the <img> element has 3 attributes: src or source to specify the path of the image, width to specify the width of the image in pixels and the height to also specify the height of the image also in pixels.

With the example above, you can see the following characteristics of attributes:

There is a space between attributes and the element name
Attributes are added in the opening tag
Elements can have many attributes
Attributes usually have a name and a value: name=“value”

Note that not every attribute has the same pattern. Some can exist without values, and we call them Boolean Attributes

Common HTML elements

There are over 100 HTML elements in total. However, in practice, around 20 of the most commonly used elements cover 80% of the usage. To simplify things, these elements can be categorized into 5 groups:

Section element
Text content
Forms
Images
Others

Section Elements

These elements are used to organize the content into different sections or groups. They are usually self-explanatory. The below elements all can be categorized under section elements.

<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

Text content

These elements serve the purpose of structuring and organizing content or text blocks. They play a crucial role in terms of accessibility and SEO, as they provide information to the browser about the intended purpose or structure of the content.

<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Forms

By combining these elements, you can create interactive forms that allow users to input and submit data. Forms can be one of the more challenging aspects of HTML to work with.

<form>, <input>, <button>, <label>, <textarea>

Images

The following can be used to either insert images/pictures and also hyperlinks in a web page.

  <img>, <a>

Others

These elements are used to add a break to the webpage.

<br>, <hr>

You can find all the elements on developer.mozilla.org. But for beginners, you just need to know the most basic ones.

How to comment in HTML

Comments in HTML serve the purpose of including notes within the code, either to explain the logic or to organize the code. These comments are enclosed within special markers: . It’s important to note that HTML comments are ignored by the browser during rendering.

Based on the information provided in the image, the comments indicate that the developer was inserting an image into the code using the <img> tag.

How to use HTML entities

In situations where you want to display the text “the <p> tag defines a paragraph.”, but the browser interprets as an opening tag, you can utilize HTML entities. This can be demonstrated through the following example:

<p>the <p> Any content placed within this section will be treated as a single paragraph.</p>

Common beginner mistakes in HTML

Closing Tags

A common mistake made by beginners is neglecting to include a closing tag. To avoid this error, it’s recommended that you always include the corresponding closing tag immediately after creating an opening tag.

Tags/Elements names

Tags or element names are case-insensitive, implying that they can be written in either lowercase or uppercase. However, it is advisable to consistently use lowercase for better readability and maintainability.

Nesting Elements

Tags must be opened and closed in a manner that ensures they are nested correctly. This implies that tags should be placed inside or outside of one another as necessary.

This is wrong :

<div> first section <h1> first header </div></h1>
So always take a critical look at how you nest your elements.

Single quotes and Double quotes

It is not permissible to mix single quotes and double quotes in HTML. It is recommended to consistently use double quotes for attribute values. In cases where HTML entities are required, they should be utilized appropriately.

The code below is also wrong:

<img src"imagesFolder/nameofImage.png'>

HTML TABLES

HTML tables are utilized by web developers to arrange data in a structured format, dividing it into rows and columns. Let’s explore the functioning of HTML tables in more detail. Tables have gained popularity on the web due to the incredible HTML table tags that simplify the process of creating and designing them.

In order to construct a table in HTML, the use of tags is necessary. The most crucial tag is the
<table>tag, which serves as the primary container for the table. It indicates the starting and ending points of the table.

Here are some commonly used HTML table tags:

<table> Defines the start and end of the table.
<tr> Represents a table row.
<th> Defines a header cell in a table.
<td> Represents a standard data cell in a table.
<caption> Provides a title or caption for the table.
<thead> Groups the header content in a table.
<tbody> Groups the body content in a table.
<tfoot> Groups the footer content in a table.
<colgroup> Specifies a group of one or more columns in a table.
<col> Defines attributes for table columns.

HTML Table syntax

Having gained an understanding of the purpose and creation of HTML tables, let’s explore how we can utilize these tags to create tables with enhanced features.

How to Add a Table Heading in HTML

An example with the use of <th>

As demonstrated in the previous example, the utilization of the tag enables us to identify the content of each column. This tag plays a crucial role in providing descriptive headers for the table columns, making it easier to understand the data presented in the table.

How to Add a Caption to a Table

By adding a caption to a table, we can provide a clear and concise description of the data presented in the table. The caption can be positioned either at the top or bottom of the table and is centered by default. This feature is particularly useful for enhancing the accessibility and clarity of the table data.

To insert a caption into a table, use the <caption> tag.

Syntax for adding caption to a table :

<table>
  <caption></caption>
  <tr> </tr>
</table>

An example with use of <caption>

How To Use Cell Spanning in an HTML Tables

You may have encountered cells in a table that span across multiple columns or rows. This is known as cell spanning.

If you have experience working with programs such as MS Office or Excel, you may have used this function by selecting the cells and clicking a command to achieve the desired result.

Similarly, in HTML tables, you can utilize two cell attributes – colspan for horizontal spanning and rowspan for vertical spanning. These attributes are assigned values greater than zero, indicating the number of cells you wish to span. This enables you to create more complex table layouts and effectively present your data.

The explanation may looks a bit complex until it’s been demonstrated using an example.

An Example with use of <span>

How to build a simple website with HTML

Individual HTML elements alone are not enough to create a website.

How to create an HTML document

To get started, please open Visual Studio Code or your preferred code editor. Next, navigate to the folder of your choice and create a new file named “index.html.”

Once you’ve created the “index.html” file, type an exclamation mark (!) and press the “Enter” key. This action will generate an initial HTML structure, resulting in something like the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


<!DOCTYPE html>: The "<!DOCTYPE html>" declaration is a necessary piece of HTML for historical reasons. It ensures proper rendering of your web page.


<html lang="en"></html>: The <html> element is the root element that wraps all the content on your web page. It's essential to include the 
"lang" attribute to declare the page's language.


<head></head>: The <head> element acts as a container for meta-information, styles, and scripts that affect the page but aren't visible to users.


<meta charset="UTF-8" />: This meta element defines the character encoding as UTF-8, which supports a wide range of characters from various languages.


<meta name="viewport" content="width=device-width, initial-scale=1.0" />: The second meta element is used to specify the browser's viewport settings, 
particularly for creating a mobile-friendly and responsive design.


<title>Document</title>: The <title> element sets the title of your web page, which is displayed in the browser's title bar or tab.


<body></body>: The <body> element encloses all the visible content on your web page, including text, images, and interactive elements.

How to build a simple Church membership Forms

Alright, now that we have the starter code, let’s build a simple membership form. We are going to use the code below:

<!DOCTYPE html>

<html>

<head>

<title>Church Membership Form</title>

</head>

<body>

<h1 style=”text-align: center; color: #333;”>Church Membership Form</h1>

<p style=”text-align: center;”>Please fill out the form to become a member of our church.</p>

<label for=”email”>Email:</label>

<label for=”phone”>Phone Number:</label>

<label for=”address”>Address:</label>

<label for=”comments”>Comments:</label>

</form>

</body>

</html>

Conclusion

Creating a basic website is achievable with HTML alone. However, to develop visually appealing and interactive websites, it’s essential to delve into CSS and JavaScript.

For ongoing insights on web development, you’re welcome to join me on social media or subscribe to my YouTube channel.

Keep coding happily, and I look forward to connecting with you in future posts 👋.

You can enhance your understanding of this article by watching the following video: