An Introduction to HTML

When I was in high school, I remember being completely blown away by a student in my class who could write HTML markup. I didn’t even really know what you could do with HTML at the time. All those lines of random characters seemed really intimidating, but what I found a few years later was that HTML wasn’t only super easy to understand, it is an integral component of our modern lives. If you’ve used a website, you’ve used HTML. And if you’ve lived beyond 1997, you’ve used a website.

Anyone who’s interested in the internet - or publishing content on the web - should know the basics of HTML. It might feel overwhelming at first to see what’s happening on the other side of a website, but if you give it just a few minutes, you’ll find yourself making little web pages for fun. So let’s dive right in. 

 

What is HTML?

HTML stands for Hyper Text Markup Language. But that’s less important than actually understanding what HTML can do for you and how it fits in with other web languages that make the modern webpage.

HTML provides the content and the structure of a web page. By content, I mean things like images, text, video, audio, etc. By structure, I mean the structure of the code that builds the page, not necessarily the visual structure of the site. The structure part will make more sense in a few paragraphs.

But HTML isn’t the only language on the web. Other than HTML, CSS establishes the visual style of a web page and JavaScript establishes the behavior of a web page. If you disable JavaScript, you’ll find that a lot of stuff on the webpage starts to break. That’s because these days websites depend on JavaScript for you to interact with the site. 

When you disable JavaScript on Twitter, new tweets won't load when you go to the bottom of the page.

When you disable JavaScript on Twitter, new tweets won't load when you go to the bottom of the page.

If you remove the CSS style sheet file from a webpage, you’ll remove things like fonts, text size, colors, images sizes, and the overall visual structure as seen below.

When you remove the CSS file from Twitter, all you really have left is the HTML.

When you remove the CSS file from Twitter, all you really have left is the HTML.

At this point we can see a really important fact: you can’t delete HTML. If you get rid of the HTML, you’ll literally just have a blank page. So we can really see that HTML is the most fundamental component of a web page.

 

Document Structure

So now let’s actually look at the structure of an HTML document. Every HTML document begins and ends with the HTML tag. The document itself consists of a head and body section. In the head, you have the title of the page. But you might also have things like CSS styling, the favicon image of the site, or other files. The body of the webpage is the actual content of the webpage. So everything that you see in your browser window is in the body of an HTML document.

<html>
  <body>
    <h2>Brent Caswell</h2>
    <hr>
    <ul>
      <li>Knowledge Jam Post</li>
    </ul>
  </body>
</html>

See the Pen Basic HTML - Brent Caswell by UAB Digital Media (@uabdigitalmedia) on CodePen.

 

Tags and Elements

Below is a paragraph element that says “The quick brown fox jumps over the lazy dog.”  You can think of an element as the container and the contents inside the container. Every element has an opening tag and a closing tag unless it’s an object like a line or an image. You can think of the tags as the container. A tag is made up of a <, the character or characters that define the tag, and a >. You close a tag by putting a / before the tag’s character(s). If you don’t put a backslash in the closing tag, your browser won’t know that you’re closing that tag, and will actually think that you’re starting a new element. This can cause problems, so it’s important to have an opening and closing tag in the appropriate location.

Code Structure.png

Tags can be given even more descriptors than just the tag name. These descriptors are called attributes. An attribute has a name and a value. The attribute value is placed inside of quotation marks and is positioned to equal the attribute name as shown below. 

Attribute.png

 

Now Go Make Something

Now that you have a basic understanding of HTML, you should be able to make a basic webpage. And if you understand everything from this little guide, you should be able to understand just about anything that you run into. You can check out these great sites to dive deeper into the languages that make the modern web: