Mosope (Deborah) Oduwole

Posted on Apr 27 • Updated on May 1 • Originally published at hashnode.com

A Comprehensive Guide to HTML for Beginners

#webdev #programming #html #beginners

Table of contents
Introduction
What Exactly is HTML?
How to Write HTML
. HTML Document Structure
. Anatomy of an HTML Element
Common HTML Tags
Common HTML Attributes
Creating Your First HTML File
Resources for Further Learning
Conclusion

Introduction

As you begin your developer journey, understanding HTML is crucial as it helps you create a website's basic foundation. HTML was created to support linking among online resources and this served as a revolutionary step in building the web as we know it.

In the context of web development, however, HTML has to do with the contents of a website, think of it as a skeleton that provides the backbone and structure to webpages. A solid understanding of HTML helps you build functional websites which can then be styled by CSS and manipulated by JavaScript.

As of 2024, over 95% of websites use HTML.

This article will serve as a comprehensive guide to HTML, walking you through its fundamental concepts, how HTML is written, common tags and attributes, the creation of an HTML file along with common text editors for coding HTML, and finally provide you with further resources for learning HTML.

What Exactly is HTML?

Created by Tim Berners-Lee in 1989, HTML serves as the core language of the World Wide Web. HTML, an acronym for HyperText Markup Language, is the backbone of the web allowing users to navigate using hyperlinks across different websites.

As a markup language, HTML marks up the page with annotations within the HTML file. These annotations are not rendered on the browser but work behind the scenes in telling the browser how to display content to the general public.

When building a house, a good foundation must be set up to ensure it is structurally sound. In the same way, HTML is the foundation upon which websites are built, providing the structure and semantics for presenting content on the web.

Before we continue, note that HTML is majorly not considered a programming language but rather a markup language. It has been argued that since HTML serves a structural purpose, not a functional one, it cannot be considered a programming language.

How to Write HTML

HTML documents follow a standard structure consisting of elements which tell the browser what to render.

A basic HTML element contains a starting and closing tag, and content, and could contain attributes and values.

Like humans, a proper HTML structure has a <head> and a <body>. The <head> element is where you add the metadata while the <body> contains information that will be displayed on the webpage. You should only place in your <body> tag what will be displayed on the page, then indent everything else inside the <body>.

HTML Document Structure

A basic HTML structure looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- This is where you insert the metadata -->
  <!-- The metadata contains information about your webpage -->
  <title></title>
  </head>
  <body>
   <!-- The body contains visible content within your webpage -->
  </body>
</html>

<!DOCTYPE html>: This is the first line of code in HTML. It specifies the HTML version, is known as a declaration and ensures the browser tries to meet industry-wide specifications.

<html lang="en"></html>: These are the opening and closing tags for the HTML document, it contains a 'lang' attribute which is added to the opening tag with the value 'en' to specify that the language of the page is in English.

<head></head>: This contains metadata about the page.

<title></title>: This contains the title of the page that will be displayed in the browser's title bar.

<body></body>: Contains visible content on the webpage.

Anatomy of an HTML Element

Various HTML elements help convey information to a web browser, from the diagram above you can see HTML elements are designated by tags (an opening and a closing tag) *note that some elements do not require a closing tag.

The attribute provides additional information to an element while the value provides additional information to your added attribute. Take an anchor element for example:

<a href="link adress"> your content </a>

<!--The opening <a> depicts the opening tag-->
<!--href is the attribute depicting the hypertext reference for your
anchor tag-->
<!--The link address is the value-->
<!--The closing </a> depicts the end tag-->

Common HTML Tags

In total over 142 HTML tags exist, each serving its purpose at different levels within the HTML document. I have curated the essential elements you will most likely come across when coding HTML.

Most HTML elements have an opening and a closing tag.

The opening tag contains the element enclosed by angle brackets(<>). On the other hand, the closing tag(where applicable) contains the element enclosed by angle brackets along with a forward slash preceding the element name (</>).

Essential HTML tags include:

1.Headings(H1 - H6): Headings define the hierarchy of contents on a webpage and it ranges from <h1> being the most important to <h6> being the least important. Adding a lower-rank heading element to your document implies that you are starting a new subsection.

<h1>Hello World</h1> <!-- Most important heading -->
 <h6>hello world</h6> <!-- sub-heading -->

2.Paragraphs(p): This lets you add a paragraph to your webpage, paragraphs are useful in presenting a structured document.

<p>This is your paragraph content</p>

3.Links(a): As shown earlier, the anchor element creates hyperlinks which help you navigate between web pages, or even within sections on the same page.

To ensure your link opens in a new tab, you can add the keyword (target="_blank").

4.Images(img): Images can be added to an HTML document using the <img> tag. Unlike the tags you have seen so far, the image tag is self-closing, which means it does not require a closing tag.

For image elements, it is essential to have a (src) attribute specifying the image source. It also helps to have an (alt) attribute to improve accessibility for screen readers if your image fails to load.

<img src="blah.jpg" alt="blah doing blah" />
 <!-- alt attributes also help your site rank higher on google search
 pages since it provides important metadata about the image -->

5.Divisions(div): <div> tags are generic block-level container elements used to group and style similar content. This tag does not affect the content of your document unless styled with CSS or manipulated with JavaScript.

It is commonly said that an HTML document is a collection of divs. Other tags can be nested within a <div> element, and even divs can be nested within other divs. This is known as the 'HTML document tree'.

Here is a diagram I created showcasing the HTML document tree and how elements are nested inside each other.

6.Lists(ul)(ol)(li): Lists can either be ordered(ol) or unordered(ul). To create an ordered list, code the opening <ol> tag along with the closing </ol>. Inside this, nest the list item tags <li></li>, then indent everything.

The same goes for creating bullet points, all you have to do is nest your list items (li) in an unordered list element.

Therefore to create a bullet point of grocery items, you should code:

<ul>
   <li>Eggs</li>
   <li>Butter</li>
   <li>Flour</li>
   <li>Sugar</li>
 </ul>

It will look like this:

Now that you have learnt some common HTML tags, let us move on to the common HTML attributes.

Common HTML Attributes

HTML attributes provide extra information about the element that will not appear in the content.

They are always specified in the start/opening tag of the element and are usually assigned a value. name/value are attribute pairs. (name="value"). Note that attribute values must be enclosed in quotation marks.

You should also remember that not all HTML elements require an attribute, and not all attributes require a value(these are called Boolean attributes). Don't stress, as you get further into learning HTML, these concepts become easier to understand.

Common HTML attributes include:

The (src) attribute: The source attribute (src) is useful in an <img> element with the corresponding value being the image link. If a (src) attribute is not added to an <img> element, the browser will not know what image to render.
<img src="image link"/>
The (href) attribute: Defines the destination of hyperlinks on an HTML document and the value specifies the link's destination. If a (href) attribute is not added to an anchor<a> element, the visitor will not be sent anywhere by the browser when the link is clicked.
<a href="your link">link text</a>
The (class) and (id) attributes: These provide extra information and styling to HTML elements by utilising CSS for styling and JavaScript for manipulation.
The (lang) attribute: An essential attribute that must be added to the start tag of your <html> element. It specifies the language of the web page and helps to assist browsers and search engines. Setting your <html lang="en"></html> specifies that the language of the page is in English.
The (alt) attribute: This is not an essential attribute but adding an (alt) to your <img> element is considered good HTML practice. Adding an alternative text makes your site accessible to those who might need it (for example, visitors with low vision) and acts as a fallback if your image fails to render properly (perhaps due to a spelling mistake or something else). It is also considered good SEO practice. <img src="cat.jpg" alt="cat sleeping on rug" />

There are more attributes and learning how to leverage them effectively will help enhance your HTML document. What should be remembered is that HTML attributes are special words used inside an HTML element to control the element's behaviour.

Creating Your First HTML File

To begin using HTML, follow these steps:

Download a Text Editor: A Text Editor is any form of a computer program that helps you change, edit, create and open text files. Basically, it helps you write code. There are several text editors for coding HTML. Some of my favourites are Visual Studio Code, Notepad++(Windows), Sublime Text(Mac), and many others.
After downloading the text editor, you will see an editor window after it is opened. Here, you will code your first line of HTML.
Begin with a <!DOCTYPE html> which acts as a declaration for your page, followed by a <html></html> element setting the (lang) to English. <html lang="en"></html>
Within your <html> element nest a <head></head> and <body></body> elements.
In your <head> element nest a <title></title> element setting the content to 'My first HTML page' to give your page a title.
Nest a <h1></h1> element and a <p></p> element within your <body> setting the contents to "My first Heading" for the former and "My first paragraph" for the latter.

It should look like this:

<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>My first HTML page</title>
   </head>
   <body>
     <h1>My first Heading</h1>
     <p>My first paragraph</p>
   </body>
 </html>

7.Next, save the file you just created on your computer and assign it a (.html) extension.

8.To view your completed file, open it by double-clicking on the saved file. This will make it open in your default browser. You should see your web page displayed according to the HTML files you added.

9.Congratulations bestie! You just created your first HTML file, I'm so proud of you!

10.As you can see, it is a pretty basic page so you are free to play around with it. You can edit the file in your text editor by adding more HTML elements with images, forms, links and other elements for a more dynamic web page. Don't forget to save the changes to see them reflected in your browser.

Resources for Further Learning

To continue your journey in mastering HTML, here are some valuable resources that helped in my developer journey:

freeCodeCamp: The 'Responsive Web Design' course on free code camp helped to jumpstart my developing career. As the name implies it's free and only requires you to create an account.
HTML and CSS by Per Borgen: This is a video I always recommend to absolute beginners. Per did an amazing job simplifying the concepts and engaging the listener.
The Odin Project: A hands-on introduction to computer basics, HTML, CSS, and Flexbox, among others.

Whether you prefer online tutorials or recommended books, there is no shortage of avenues to learn HTML, you should do your research and choose the resource that works best for you!

Conclusion

HTML is the language of the web and as you embark on your developer journey, a good understanding of HTML will prove useful and rewarding in the digital landscape.

You can always build simple websites with HTML alone but note that to build beautiful and functional websites, a good understanding of CSS and JavaScript will be essential in the future. Like humans, HTML can be likened to the skeleton, CSS to the skin and JavaScript to the brains of a website.

Remember that practice and perseverance are key in whatever you wish to learn and HTML is just the beginning of an exciting adventure in creating dynamic and interactive web experiences. I wish you good luck in your developer journey.

Happy coding besties!