Wonders of HTML- a simpler language

BASICS

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.

HTML TAGS

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:

Notice:

  • 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:

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Sub-subtitle</h3>

and so on…

The <p> tag defines paragraphs.

The <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 <ul>.

The <b> tag makes words bolded.

The <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 <a> tags:

<a href="https://www.cancer.org/"></a>

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store