In this article, I'll be teaching you the basics of HTML which is one of various components needed to code a website. Lets get right into it and discuss what is HTML?
What is HTML?
HTML, Hypertext Markup Language, is a markup language designed to display content on websites. It is the basic building block of every website that exists today. Despite what framework or server-side language used, the content of the user interface of a website boils down to HTML.
Text Editors
While HTML can be written in a program as basic as notepad, I recommend using a full-fledged text editor. Proper text editors provide code highlighting as well as auto-complete that will significantly increase your efficiency in writing HTML and code in general. Some popular text editors include:
- Visual Studio Code
- Sublime Text
- Atom
- Notepad++
Visual Studio Code is bolded as its the one I would recommend.
It fully up to you what text editor you want to use. Whether its Visual Studio Code or Notepad, make sure you're happy with it as you will be using it a lot.
Browser
Obviously, you will need a web browser. In fact, you're probably using a web browser to view this article now. Computers with Windows installed, automatically come Microsoft Edge however, I would recommend using Google Chrome. Google Chrome, a web browser made by Google, is a great browser that is fast and has great developer tools. Some other popular browsers include:
- Firefox
- Safari (For Mac)
- Opera
- Brave
As long as your not using internet explorer, you will likely be fine and not run into any problems. Just make sure you are happy with your browser.
Setting Up File Structure
Create a new folder on your desktop or wherever you want to store your website files; call it first-website or anything you want. Inside of that folder, create a file called index.html and open it in your desired text editor.
Tip: You may need to make file extensions visible in your operating system to make sure its a '.html' file.
Understanding HTML Elements
Inside of a HTML document, there are various elements present. For example, there might be a paragraph element which would show a paragraph on screen. The following code is an example of a paragraph element. We will be dissecting it to understand what each individual part means.
<p class="text">Here is my paragraph</p>
The 'p' is referred to as the tag. It defines what the element is which in this case is a paragraph. Content is placed between the opening tag (the first one) and the closing tag </p> . In this case, the content is 'Here is my paragraph'. There are a very large amount of elements in HTML; common ones are discussed in sections below the HTML Document Structure section. The class="text" part is what is called an attribute. Attributes provide special functionality to elements and in some cases modify default functionality. We won't cover many attributes in this article however in a google search you can discover many new and exciting attributes with cool functionality.
HTML Document Structure
The basic structure of a html document is fairly simple. The first line is a 'doctype' declaration which declares the version of HTML the web page uses. After this declaration, there is a html element represented by the <html> tag that encompasses the body element as well as the head element.
The Head Element
The head element usually holds metadata that the browser and search engines use. It is defined by the <head> tag. It is placed in the HTML element and before the <body> tag.
The Body Element
The body element holds the actual content displayed on the website. It is defined by the <body> tag and is placed after the head tag.
The basic HTML document structure looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Note: The '<!-- -->' is used to write comments in HTML which means it isn't shown to the user on the web page.
Viewing Your HTML File
To view your file, open it in your desired web browser. To do this, just right click on the file and select open with, then select whatever web browser you wish to use.
Tip: Remember to save the file and refresh your browser every time you make a change in order to see it.
Common HTML Elements
With the basic document structure out of the way, we can discuss common elements used in websites.
Common Elements in the Head Tag
The title element is an element found is every website. It is defined by the <title> tag. The title of a page is shown in search engines as well as the tab at the top of the browser. To add a title, place the following tag inside the head element of your document.
<title>Your Title Goes Here</title>
Another tag used in every website is the meta tag. It provides meta data of various sorts based on its attributes. Two common example are:
<meta charset="UTF-8"> Specifies the character encoding for the HTML document<meta name="viewport" content="width=device-width,initial-scale=1.0"> Specifies the viewport; used for making a website responsive
Note: The Meta tag doesn't have a closing tag; it is referred to as a self-closing tag.
Some other examples of elements in the head tag are the <link> and <style>. The link tag has many uses including adding a favicon, connecting to stylesheets and more. A favicon is the little icon in the tab section of the browser (beside the title). Stylesheets are written in CSS and are used to style the content of the website. This article does not cover CSS however, we have a getting started with CSS article that will teach you everything you need to know. The <style> tag is used to write CSS in the HTML document itself. Don't worry about these tags for now, you will become familiar with them when you learn CSS.
Common Elements in the Body Tag
Elements placed in the body tags are usually content that is shown to the user. Below are examples of the most commonly used tags. These include paragraphs, hyperlinks, lists, images, headings and forms. There are more elements out there however these main elements will go a long way.
Paragraphs
The tag that represents paragraphs in HTML is the <p> tag. You simply place whatever text you wish to put on your website between the opening tag (<p>) and the closing tag (</p>). For example, the code below would be used to display a paragraph with dummy text (Lorem Ipsum).
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis magna
eu vehicula pellentesque.
</p>
Note: Lorem Ipsum is simply dummy text. You can learn more about it here
Hyperlinks
To add a hyperlink to your website, you can use the <a> tag. In between the opening and closing tags, you can place whatever text you wish to display to your user. The address that the link redirects to is stored in the href attribute. For instance, the code below will display a link saying Google that links to google.com.
<a href="https://www.google.com/">Google</a>
Tip: If you want the link to open in a completely new window, you can add the target="_blank" attribute to the a tag.
Lists
There are two kinds of lists you can add to your website. These include unordered lists (the <ul> tag) and ordered lists (the <ol> tag). The difference is that the ordered list is used for lists in a specific order and have numbers starting from 1 displayed before each item. The unordered list, as the name suggests, is used for lists without an order. The code blocks below are used to display an unordered and ordered list respectively.
<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
<li>Unordered List Item 3</li>
</ul>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
The <li> tag is used for each list item in the list. It can be used in both unordered and ordered lists.
Images
The <img> tag is used to put images on web pages. Firstly, to specify the exact image you wish to display, the src attribute is used. This is set to the path to your image file. The src attribute can also be a web address of an image. After adding a source to your image, you should also add an alt attribute. The text in the alt attribute is displayed to the user if the image can't be found. Additionally, if a user is using a screen reader, it will read out the alt attribute so it is a good practice to improve the accessibility of your website. The code below would be used to display an image called car.jpg that is in a folder called images.
<img src="images/car.jpg" alt="Car" />
Note: The img tag is a self closing tag which means its doesn't have a closing tag.
Headings
There are 6 tags used to display headings that range in size. These include:
<h1></h1> - The largest heading<h2></h2><h3></h3><h4></h4><h5></h5><h6></h6> - The smallest heading
To provide an example, the code below displays a heading 1 (<h1>) with the text 'Large Heading'.
<h1>Large Heading</h1>
Where to From Here?
Now its your turn. Experiment with these various elements and see what cool websites you can build. You can also look into other elements not covered in this article such as forms and tables.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
Github: Blake-K-Yeboah
LinkedIn: Blake Yeboah
You can also show your support by buying me a coffee 😃
