What is HTML?, Luis E. Yera

In simple terms, HTML is a computer language that is used for building web pages. More accurately, it’s the base computer language that makes up a web page. Building web pages usually requires more than one language to look good. Usually HTML is used with CSS and JavaScript to create modern web pages. I’m not going to do that weird thing and go into the whole history of HTML with you. I’m only going to tell you what it is and how it’s used in tech. Let’s get started.

HTML is an acronym for Hyper Text Markup Language. It’s has a bad rap with programmers because it’s not actually considered a “real” programming language. It’s actually a very basic language that lets us structure the elements of a web page.

HTML has been compared to the bones of a human body. If you think of the human form, we can say HTML is like the bone structure of a human. CSS is like the skin/clothing/hair, and JavaScript is the human’s behavior. CSS usually goes hand in hand with HTML, but we’ll discuss that in a different thread to keep this focused on the topic at hand. If you’re wondering what CSS even means, it’s just an acronym for Cascading Style Sheets. CSS just adds style to web pages in a “cascading” fashion. JavaScript imbues the web page elements with movements and actions—responses to user interaction.

If you’ve ever used Microsoft Word, HTML kind of works like that. The only difference is that you don’t click on buttons to arrange the page elements. Instead, you use what we call “HTML tags” to tell the internet browser how to interpret paragraphs, images, titles, and all of that from the content that you put in. Your content sits in between matching HTML tags (for the most part). That looks like this:

<p>This is my content</p>

Very simple, as you can see. We just told the internet browser that we are placing the sentence “This is my content” on the web page. the HTML tags that wrap around our content are paragraph tags. These tell internet browsers to interpret our content as a paragraph. The browser looks at the opening tag (<p>) and considers everything from the opening tag to the closing tag (</p>) as a paragraph. As you can observe, the only difference between the opening and closing tag is that forward slash right before the ‘p’ in the closing tag. That forward slash tells the browser it’s a closing tag. Sometimes HTML tags don’t need a separate closing tag though. These are called “self-closing html tags.” One self closing tag to remember is the tag we use to embed images in our web page. Here’s what that Looks like:

<img src="url_to_my_image.jpg" alt="My beautiful image" />

As you can see, there is no closing tag. It’s not like <img></img>. Instead it’s just one opening angle bracket (<) then the “img” tag to indicate we’re embedding an image, followed by what we call “HTML attributes”, and then it closes with the forward slash and a closing angle bracket (/>). The HTML attributes are cool. They let us customize our HTML elements. In this example we’re using 2 different HTML attributes. The 2 attributes we are using are “src” and “alt.” The parts that say “url_to_my_image.jpg” and “My beautiful image” are what we call values. Together these are called key-value pairs. Key value pairs are the foundation of all computer coding. Nearly everything is created by simply telling the computer “this is equal to that.”

The “src” attribute tells the internet browser that we want to use “url_to_my_image.jpg” as the source value for the image. The “alt” attribute tells internet browser that if our page visitor can’t physically see our website, then we want their web reading software to alternatively read the image to the visitor as “My beautiful image.” This allows us to describe the image to page visitors that don’t have working eye sight; making our content accessible and inclusive. Those visitors will use a screen reading software to help them browse the internet by hearing, and the alt attribute will let us communicate image elements to those folks. It’s best practice to always have a well-written alt tag for your images. This doesn’t only benefit blind folks, but it also helps your web page rank better in search engines such as Google. This is a helpful way to optimize your web page to generate more traffic (known as SEO). We’ll go more into SEO in the future. SEO is an acronym for “Search Engine Optimization” if you’re wondering though.

Now that you’re aware of basic HTML etiquette you’re probably wondering how many tags you need to remember. There are a whole lot of different tags to use, but you never really use them all that often. You really only need to remember about 5-20 tags to be effective with HTML. There are 6 different heading tags available:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Then, as I showed you earlier, we have the image tag and the paragraph tag. Another which is quite common is the “div” tag. The div is just a blank container to divide your page elements. It allows you to compartmentalize your information and keep like items grouped together inside of divs. A div tag is just an empty container to store elements that should be kept together. They are mainly used for keeping the page organized. Those are the main tags we’ll talk about for now. That’s mostly all you’ll ever need. If you want to create links you just use ‘a’ to anchor your text to links. That’s its’ own little lesson, but still very simple. That looks like this:

<a href="target_link.com">My hyperlinked text</a>

Other than those very specific tags, you should be aware that there is a foundational structure to a web page. Every web page is technically referred to as a “Document Object Model”, or DOM for short. Don’t run away now; it’s only a fancy term for a web page. If we take the obvious word “document” out of that, we are left with “Object Model.” That’s all it is. A document model of structured [digital] objects. Objects are the HTML tags we just went over. That means the <div></div> tag is an object that we can organize into the structure of our web document. The <img/> tag is also an object that we can organize into the structure of our web document. Even the <h1></h1> tag and the <p></p> tag are objects for our document model.

An object, in the digital sense, is defined by properties and values. This is what we already talked about, but we called them “attributes” instead of properties. There are little technical nuances to these terms, in the world of coding, but they can be used synonymously for the sake of understanding. We’ll go more into objects later, but just know that websites are simple documents that hold/contain “objects” within them in a structured manner. The hierarchy of how the objects are displayed on screen depends entirely on something we call “nesting.” Think of it like your living space. If your living space is the document object model, then you keep things “nested” in their proper place. For example, you might nest objects such as clothing inside of other objects like your closet. Though, the following code is not valid for an HTML DOM, it will help you to understand nesting. With the illustrative example I just gave you, this is how that would look in code:

<living-space>
    <closet>
        <tshirt-1></tshirt-1>
    </closet>
</living-space>

Now, if we wanted to also state that the t-shirt in the closet (tshirt-1) is a blue shirt, we could specify that by targeting the tshirt’s color property. We then assign the value as “blue” so that the internet browser responds accordingly by presenting us with the blue t-shirt. Again, this example doesn’t actually work for HTML, but it helps to illustrate the point. This is how we would assign the value of “blue” to the color property:

<living-space>
    <closet>
        <tshirt-1 color="blue"></tshirt-1>
    </closet>
</living-space>

In reality, we would likely add styling to an HTML object by using the “style” attribute instead of the “color” property. Again, this is only to help you wrap your mind around the basics of HTML. The real styling would look something like this:

<living-space>
    <closet>
        <tshirt-1 style="color: blue;"></tshirt-1>
    </closet>
</living-space>

As you can see, we nested the t-shirt inside of the closet. The closet is also nested within the living-space. This is how HTML structures are organized to present web pages to you through web browsers. Now that you understand the basic syntax of HTML and how the tags are nested into the structure, let’s just take a little step back.

I mentioned that every web page is a Document Object Model (DOM). This DOM is built with a foundational set of tags that don’t present any visual information. The information that those tags hold are specifically for communicating configurations to the internet browser that calls out for the website. These HTML tags i’m referring to need to be present in order for the web page to actually be read/understood by the browser. The information is referred to as “meta data” and it’s always written between 1 tag. The <html></html> tag. But even before the <html></html> tag, we need to declare the document as an HTML document by using 1 tag that has no closing tag associated with it. That very important declaration tag looks like this:

<!DOCTYPE html>

That line tells the browser that the page of text is to be interpreted as an HTML document. Following the declaration, we define our webpage within the html tags like so:

<!DOCTYPE html>
<html>
    [Web page content inserted here]
</html>

But, before we go and plop in any random tags, we also need to define 2 more essential tags. These are the <head></head> and <body></body> tags. The head tag holds the invisible meta data for the browser to understand how it should interpret the information on the page. The body tag is where we put all our own custom tags to make the visible elements appear when the web page loads in to the browser. That then looks like this:

<!DOCTYPE html>
<html>
    <head>
        [Insert your meta data]
    </head>
    <body>
        [Insert your customized web page elements]
    </body>
</html>

I won’t go into much more detail about the meta information that goes in the head tag, but there are some tags that absolutely need to be present in order for the page to work. One of those essential tags is to tell the browser which encoding the text on the page is using. There are several different encoding types, but you will see “UTF-8” more often than not. You also need to have a <title></title> tag to tell the browser what should be written on the little bar in your web browser tabs. Let’s update the code to show you what that looks like with those updates:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My webpage</title>
    </head>
    <body>
        [Insert your customized web page elements]
    </body>
</html>

Also, take notice that the meta tags are never closed. That is the proper syntax. You can use multiple <meta> tags. Another one we need to define is the viewport for the web page. Again, I won’t go into great detail about that here, but that would look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My webpage</title>
    </head>
    <body>
        [Insert your customized web page elements]
    </body>
</html>

The values won’t always be the same, but you will definitely use “viewport” to define the content scale and width. Let’s keep it simple here and finish this example off. There will be other tags you use in the <head></head> tag, but we’ll just keep the ones we have—for the sake of understanding. Let’s imagine now that we want to display a large heading that says “Welcome” along with a paragraph of text. The code for the whole web page would look like this:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Webpage</title>
    </head>

    <body>
        <h1>Welcome</h1>
        <p>This is a paragraph of text</p>
    </body>

</html>

Notice that I even gave you some space to make each section more obvious. The tags are indented to show you the nesting. You can do this in real HTML code too. The browser will still read the page the same way. It’s often a good idea to add extra spaces to help you read and track your code when you work on large-scale websites. When you have thousands of lines it can get really hard to read everything if there is no space between the elements.

One more thing you should know is that you can write your HTML in any text editor. You don’t need anything fancy. If you write it all the right way, using the right syntax, then you have a web page from your text file. If you ever saved a text file before, then you know that the file has an extension of “.txt” or “.text” which indicates that it should be read as bare text. If you want the browser to recognize your document as html then you only need to change the .txt extension to .html instead. So if the text file where you saved your HTML code is “my_website.txt” then you need to change it to “my_website.html” in order to make it work. Once you have that .html extension you can right click on it, select “Open with”, and click on any browser you have available on your machine.

This should cover the basics of HTML code for anyone to understand what it is and how to use it. If you’re still unclear of anything then feel free to s e nd me an email through my contact form. Best of luck in your new web development journey!