Have you ever wondered what makes up a web page? It’s called HTML, and it’s something that everyone should know about.
What is HTML?
HTML stands for HyperText Markup Language. It is a markup language, not a programming language. This means that unlike languages such as C#, Java, etc., HTML marks up the file’s contents to tell the parser (your web browser) how the content contained within the file should be displayed. Programming languages are executed and do work, while markup languages indicate how the content should be displayed.
Tags: The building blocks of HTML
HTML is comprised of elements. Most elements have a starting tag, some content, and then a closing tag. For example, here is a paragraph element:
<p>This is a paragraph element!</p>
As you can see, the paragraph element begins with a
<p> tag, ends with a
</p> tag, and has some content in between. In fact, the general form for an HTML tag/element is:
Take special note of the forward slash immediately before the tag name in the closing tag. This is very important, as the web page will not look the way you want without it. Every tag must be closed by a closing tag counterpart.
Well, almost every HTML tag has a closing tag counterpart. The exception is empty elements, which don’t hold content. Here is an example of an empty element:
Which results in:
Another example of an empty element is the
<img src="img1.jpg" alt="An image" />
You may see this and think, “Whoa, hey, slow down! What are those other things,
alt?” This may be a good time to introduce attributes.
HTML tags often have certain attributes, or properties, that modify the element. Most tags have optional attributes like
style while other tags have required attributes. The
img tag from last paragraph has two required attributes,
img tag must have a
src attribute because that attribute defines the path for the browser to take to find the image referenced by the tag. And the
alt attribute is required in case the browser cannot find the image. If the image cannot be accessed or doesn’t exist, the browser will display the alt text in its place.*
Some common attributes include:
- style – sets the CSS styling for the element
- class – sets the class (primarily used by CSS and JS)
- id – sets the ID (primarily used by CSS and JS)
- title – sets the tooltip text (box of text when you hover over the element)
- href – hypertext reference (mainly used in links)
There are also global attributes, common to all HTML tags. W3Schools has a nice list of global attributes for your reference.
The Structure of an HTML Page
Like I said before, web pages are made up of HTML. But you can’t just start putting tags into an HTML file at random and expect it to look the way you want. You have to follow HTML’s particular structure.
The html Tag
The content of any webpage is wrapped in an
html tag. This is HTML best practice; most modern browsers understand if you leave them out, but it’s a big no-no. Here’s what it looks like:
<!DOCTYPE html> <html> ...CONTENT... </html>
That first line tells the browser that the file is a document of type HTML. It is a best practice introduced with the latest version of HTML, HTML5. We’ll talk more about HTML5 in another post.
html tags, there are two main sections, the
head section and the
The head Tag
head section is where the browser looks for important information about the document. The title that goes in the browser tab is set here. Also, lots of good information used by search engines goes in the
head section. This is where you will request CSS files and certain script files, too.
Here’s how we set the page’s title:
<head> <title>Website Title</title> </head>
The body Tag
body section holds all the content you see on a web page. This blog post is in the
body section of this page! The
body section is mostly just a container for the content. Here’s a line of text within the body:
<body> <p>This is a paragraph in the body section!</p> </body>
Putting It All Together
Now that you know a bit about the structure of HTML, let’s build a simple webpage! Open up Notepad, or whatever text editor you have on your computer. Microsoft Word is a word processor and WILL NOT work. Create a new file, call it sample.html, and save it as type “All Files” (not .txt).
Let’s start with the HTML tags:
<!DOCTYPE html> <html> </html>
Now we’ll put in the head and body tags:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Let’s add a title to our website:
<!DOCTYPE html> <html> <head> <title>My Sample Website</title> </head> <body> </body> </html>
And finally, we’ll add a bit of text, including a header:
<!DOCTYPE html> <html> <head> <title>My Sample Website</title> </head> <body> <h1>Welcome!</h1> <p>I hope you enjoyed this post!</p> </body> </html>
sample.html again, go to it’s location in the file explorer, right click on
sample.html, and click Open With. Choose your favorite browser and click Ok!
You should be seeing something like this:
If your page doesn’t look like this, gives an error message, or just doesn’t show up, leave a comment below and I’ll help you figure out how to fix it. Thanks for reading!
alt attribute is also used to improve SEO, Search Engine Optimization, but we’ll cover that topic another time. For now, check out this blog post on SEO.