A Beginners Guide to HTML

#beginners #html

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:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Example Page</title>
  </head>
  <body>
    <img src="(insert URL link for image here)" alt="Example Image Title" />
  </body>
</html>

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:

<!doctype html> -- 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.
<html></html> -- 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.
<head></head> -- 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.
<meta charset="utf-8"> -- 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.
<meta name="viewport" content="width=device-width"> -- 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></title> -- Title element is pretty easy - what is the title of your page? The title appears in the browser tab when the page loads.
<body></body> -- 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

<h></h> --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:

<!-- 4 heading levels: -->
<h1>My main Heading</h1>
<h2>My first sub-heading</h2>
<h3>My sub-subheading</h3>
<h4>My sub-sub-subheading</h4>

Paragraphs

<p></p> -- This is where you will include your text content that will be displayed on the webpage.

<p> Hello, my name is Katie and I have 4 dogs</p>

We can even take this a step further by adding lists to our paragraph tags by using the <ul></ul> (unordered list) or <ol></ol> (ordered list) tags.

<p>Hello, my name is Katie and I have 4 dogs</p>

<ul>
  <li>Clementine</li>
  <li>Cookie</li>
  <li>Denver</li>
  <li>Bulleit</li>
</ul>

<p>It's a dog gone paradise!</p>

Images

<img/> -- 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.

 <img src="(insert URL link for image here)" alt="Example Image Title" />

Links

<a></a> -- 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:


`<a>Katie's Dog Blog!</a>`

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

`<a href="(URL link to webpage you want to include in your HTML)">
  Katie's Dog Blog!
</a>`

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

Top comments (6)

Luke Inglis • Jan 4

One thing to add is that it's worth noting that some elements, things defined by tags, are structurally important to a page. This is particularly important for accessibility and technology such as screen readers for non-sighted users.

For example with headers, a single HTML page should only ever have a single h1 tag. It should be considered a 'top level heading'.

Learning accessibility best practices at the same time as you learn the other basics of HTML and web dev in general is much easier than playing catch up later on.