Have you ever pressed some keyboard combination that suddenly opens a new window on your web browser similar to the following?:
Even though you have not seen this window in your life, this window is one of the essential tools for web development. It is really important that you familiarize yourself with it. This window is called the inspector or a webpage, or simply an inspector.
There are 3 ways of accessing the inspector of a webpage:
- Right-click any element (text, image, button, etc.) from the webpage.
- Select “Inspect” (PC) or “Inspect element” (Mac).
- Press simultaneously Ctrl-Shift-C (Windows) or Cmd-Opción-C (Mac OS and Linux).
- Select the Inspect option from the Developer menu (it can appear as a submenu in View menu on Mac).
Looking at the left side of the inspector, you will notice that there are lines that start and finish with letters o words inside the symbols “<” and “>”. These are known as elements from the Hypertext Markup Language or HTML.
This is the first of a series of articles that will be dedicated to explaining HTML basics. The articles cover from the general definition to creating a web page with styles included. There is a Spanish version of this article here. Also, the other articles from this HTML series are HTML: Tag Attributes (Spanish version) y HTML: Tag Nesting (Spanish version).
Note: At some point in this article, you will be using Notepad (PC) or TextEdit (Mac) to practice a small exercise. Keep that in mind and on hand.
What is HTML?
From MDN Web Documents, the word hypertext refers to links that connect webpages between them, being webpages from the same website, or in different websites.
Also, MDN suggests that HTML’s markup denotes the buttons, menus, images, videos, and other elements that are on a webpage.
So HTML describes the structure of a webpage. Also, it interprets to the web browser how the webpage is displayed.
What is the HTML Structure?
The letters and words that are between “<” and “>” are HTML tags. Tags denote the type of element located on the webpage. A simple example is:
<p>My cat eats a lot.</p> (1) (2) (3)
- The opening tag “<p>” denotes the starting point of the element type paragraph that is located in that position of the document.
- “My cat eats a lot.” is the content of the element type paragraph.
- The closing tag “</p>” denotes the final point of the element type paragraph is located at that position in the document.
If you are asking yourself, “how do you know that the element is type paragraph?“, the answer lies in the letters and words located between the symbols “<” and “>”. From the prior example, the letter p denotes that the element is a paragraph (p from paragraph).
There are multiple tags. The most basic structure of a web document in HTML would look like the following:
<html> <head> <title>Webpage title</title> </head> <body>Webpage content.</body> </html>
Now It is Your Turn
It’s time that you open Notepad (PC) or TextEdit (Mac OS). Even thou neither Notepad nor TextEdit are good text editors for coding, you can use them as a beginner to loosing up your machine writing skills.
Let us do an exercise that will make you feel powerful. It is a simple exercise but it will motivate you to continue to practice writing HTML.
Note: I suggest that you read this article from MikkeGoes.com titled Finding the Best Text Editor for Coding: 7 Top Tools for Programming if you need guidance on which text editor suites you.
Copy and paste the following code on a new sheet from the text editor that you just opened.
<html> <head> <title>Today is the day</title> </head> <body> <h3>Let's write machine!<h3> <button>Let's Go!</button> </body> </html>
After copy and pasting, MAKE SURE that the following configuration is set in the document before saving:
- The text must be saved as Plain Text (without format).
- Encode should be set to Unicode (UTF-8).
Save the document with the extension .html on any file on the computer that is easy to access.
It is IMPORTANT that you save the document with .html as an extension (document type must be HTML).
Locate the document on your computer and open it.
If the document did not open on the web browser automatically:
- Right-click on top of the .html document icon, and select “Open with” option to choose the web browser of your preference. The document should open on the selected web browser.
- If the prior step did not work, you can copy the location of the document on your computer, and paste it on the web browser’s web address input.
Locate the web browser that just opened and observe the HTML document that you just created.
Note: If you see tags written on the web browser, feel free to jump to the I Can See the Tags on My Browser section of this article.
WOOP! You should see something similar to the following:
As you can notice, what you observe on the webpage is the content inside the tags.
On the example you just created, you can see that the content inside the tag <title></title> is located at the page tab. So, now you understand that the <title></title> tag represents the title located at the page tab.
Also, you can observe the content of the tag <h3></h3> because the tags refers to Heading 3 (heading type 3). Finally, the <button></button> tag denotes the button with its content (text information on the button).
I Can See the Tags on My Browser
But, if when you opened the document on your web browser and the code looks the same as you wrote it in the text editor (tags are visible), repeat the steps mentioned earlier to identify the misstep.
By the way, you can apply the strategies I explained in the article How to Practice Problem Solving for Web Development without Writing Code to find the misstep.
Note: If you identify a missing step or that the steps can be better explained, feel free to comment below so I can make the necessary changes 😅.
Practice, Practice, Practice
Powerful stuff, right? Even though you probably still do not know what the heck are you doing, you will get the hang of it.
My personal experience is that it has been easier for me to understand the code after I see it working. I copy a code that I search on the internet, and I play with it, changing every aspect of it so I can see how the changes work.
In this case, you can add different types of tags so you can see how the different elements are denoted.
Thanks for reading.
The following CTRL-Y articles are related somewhat to this post. You may want to check them out!:
- HTML: Tag Attributes
- HTML: Tag Nesting
- How to Practice Problem Solving for Web Development without Writing Code
- Programming Language: The General Parts
- What is the Rendering Engine?
- Learn to Code: Lowering the Programming Pedestal
- Night Owl Home Office
By the Way – A Playlist for You
I wrote this article listening to the Spotify playlist This is Boards of Canada. It has almost the entire discography of the band Boards of Canada. The band consists of a duo of Scottish brothers, Michael Sandison and Marcus Eoin. They play downtempo ambient electronic music with certain elements of psychedelia and hip hop.
Until the next one! 😉