As a beginning software engineer, it’s essential to understand the basic concepts first to be able to utilize the power they hold. One of the main concepts to understand early on in your journey is the HyperText Markup Language or HTML as it’s usually referred to.

What is HTML?

The formal definition of HTML is a descriptive language that specifies a webpages structure. HTML is a document-based technology. Which basically means that our HTML file will hold all our information for us while we build our webpage! Pretty neat.

HTML Structure

Here below is an example of a basic HTML file structure. Take a look and then let’s talk about it:

Before we get into all the HTML tags and what they mean, take a peek at the way the the page above is structured. Easy to read and organized, right?

Keeping your HTML page clean, organized, and easy to read will help prevent any errors along the way as well as help debug and edit.

Now, let’s get into it:

• — This is an important line of code. It is required at the beginning of your HTML document to ensure your HTML does what it’s supposed to.

• — As you can see, there is an HTML tag at the second line of the code, and at the end of the code. This is the basic format of most HTML tags. To have an opening tag <> and a closing tag with your code in between. The HTML tag specifically is known as the “root” code. Within the HTML tag you will input your content. In the opening of this tag you will also put the language you will be using for your document.

• — The head tag is where you add information to your page that is not seen by the user. Things like your CSS styling attachment, key phrases that we want to be used in web searches, page descriptions, etc.

• — Between our header tags, there are usually two standard lines of code. This is the first one. It’s an element that declares the character set you’ll be using in your document. Its value should be set to UTF-8 – a variable-length character encoding standard used for electronic communication – to ensure it will handle any text content you add.

• — Now this is a cool line of code that is the second part of our standard header element. This line of code basically will make sure that the content will render to the browser you’re using.

• — Title element is pretty easy – what is the title of your page? The title appears in the browser tab when the page loads.

• — The body code. This is the meat and potatoes of your HTML code. All the elements the user will see will be included in the body tags. Things like text content, page headers, music, videos and images, and so on. In the body element you really get to play around and have fun!

Useful Tags

Now that we’ve gone over the basic anatomy of HTML pages, here are some tags you should get used to using right away:

Headings

• –Not to be confused with the header tag that we previously discussed, this tag creates a heading for your webpage that the user will see. It can be used up to 6 times but generally most developers stick to 4. Like this:

My main Heading
My first sub-heading
My sub-subheading
My sub-sub-subheading

Paragraphs

• — This is where you will include your text content that will be displayed on the webpage.

 Hello, my name is Katie and I have 4 dogs

We can even take this a step further by adding lists to our paragraph tags by using the

(unordered list) or

(ordered list) tags.

Hello, my name is Katie and I have 4 dogs


  
Clementine
  
Cookie
  
Denver
  
Bulleit


It's a dog gone paradise!

Images

• — Below is an outline of how you’ll add your image to your page. The image tag is one of the few HTML tags that does not need an opening and closing tag. Instead, it is self-contained. In the src attribute we add our image URL, and the alt attribute is to include any specific text related to the image that will help people who are visually impaired be able to understand the image more clearly and in the cases where your image is having problems being displayed.

Links

• — The “a” that we use in the links tag stands for “anchor” and this one is a bit trickier than the others. To embed your link properly you’ll need to follow a couple steps.
  First, we’ll add some text to our anchor tag, like such:

`Katie's Dog Blog!`

Then we add an href attribute to our opening tag which will include the link we want to input.

`
  Katie's Dog Blog!
`

And that’s it!

Conclusion

It’s my hope that this post will help you gain an understanding of HTML basics and how you can use the foundation we discussed today to branch out and make some awesome web pages!

Sources:
MDN HTML Basics
UTF-8