HTML is a programming language for the web. It’s easy to hear that and get a little apprehensive but I can assure you it isn’t like other languages. This one is actually a whole lot easier. It stands for Hypertext Markup Language. This is basic code used to build out the structure of a web page. The language normally works in conjunction with its sister, known as CSS. However, for this blog post we will focus on the main course before diving into all the neat flavors dessert has to offer.
BEFORE WE CSS, LET’S TRY TO UNDERSTAND HTML
Take a look at this Word document.
The document is formatted with titles, subheadings, bold text, italicized text, bulleted lists, and hyperlinks. Now let’s copy and paste the information we have in this word document and put it in a very basic html template that contains <head> and <body> tags.
Then, view it in the browser with the Visual Studio Code live server extension…
All the formatting we once had in our Word document is now gone. We need to fix this. That is where HTML tags come in. The tags help us to structure content in our webpage.
Check out → https://eastmanreference.com/complete-list-of-html-tags for a comprehensive list of said tags.
A few tags we need are:
- <h1> heading level one
- <p> paragraph
- <h2> heading level two
- <b> bold
- <i> italicized
- <ul> unordered list
- <li> list
Here is the HTML document in the browser, now with tags added:
Starting to look a little more organized. Our headings are larger and more bold than the rest of the text. Our paragraphs have line breaks with margins added after them. While HTML is handy for adding styling in terms of structure, the basis of it all is still pretty bland and sad. CSS language, as mentioned before, will really give us the color and style we are looking for in a functional website. How refreshing! But, today this is purely about HTML.
These tags as used previously work by making the document more visually appealing and interactive for the user. Take a look at the HTML document we created:
- Tags surround each element on the page
- A tag itself has both an opening bracket:
<and a closing bracket:
- There’s also an opening tag
<tag>and a closing
</tag>that includes a forward slash
- Meaningful content goes between the tags
Without tags, the browser would have NO idea what to do anything.
The Tags We Used
We used the H tags for headings, of which there are six levels:
and so on…
<p> tag defines paragraphs.
<ul> tag defines a bulleted (or unordered) list and the
<li> tags define each item in the list. If you wanted to show a numbered list instead, you would simply use
<ol> for ordered list instead of
<b> tag makes words bolded.
<i> tag will italicize chosen words.
ADDITIONAL HTML FORMATTING
You might notice that we missed some things when comparing the Word document to the HTML page in the browser.
To add a link to a website, we need to surround the clickable text with
You see, href stands for hypertext reference and is added to the
<a>tag. It will define the URL that we want our link to go to. The URL has to be between double quotes.
I hope you enjoyed reading along and gaining some basic html knowledge, don’t forget to visit the site linked above for a comprehensive list of html tags and with practice, you can eventually create something wonderful!