Web 101: HTML Introduction

July 14, 2017

HTML, web development, and creating a website from scratch can seem daunting, and if you’re not organized or have no clue what you’re doing, it is. However, as you break it down into the most basic elements needed to create a simple web page, it’s really as easy as creating a Word document, like you do every day — kind of.

A Language of Love?

To create a web page, it’s necessary to understand the two different languages of web development: HTML and CSS. HTML, which stands for Hypertext Markup Language, is the base or main structure (kind of like the foundation and beams that hold a house together) used to build elements. CSS, or Cascading Style Sheet, is the language used to augment the HTML elements with style (like the paint, pretty photographs, and rugs that make your house look pretty). To write code to build a web page, you don’t need any fancy programs. You actually start by creating a file on your computer, saved as a .html file — any file, even a Word document, saved as .html will open in your web browser when you click it so you can see the output of the code you wrote (kind of cool).

Tag, You’re It!

The basis of every web page, from the most simple to the most high-tech, is built first using HTML. Understanding HTML mostly revolves around learning and memorizing “tags.” Tags are used for organizational purposes internally within your code document and externally creating what you see laid out on the resulting web page. This website provides a great breakdown of many common tags. You’ll know it’s a tag because it always has these symbols: < or >.

There are two types of tags: paired tags and unpaired tags. Paired tags require a companion tag: both an opening and closing tag. These types of tags include things like a heading or a paragraph. These tags would look something like this: <h1>This text is a large heading. </h1>. <p> This is a paragraph. </p>.

Unpaired tags, like Doctype or HR (horizontal rule), do not require a companion or open and close tags. Examples include horizontal rule or line breaks, and would look something like this: <hr> or <br>.

Beyond paired and unpaired tags, tags can be further categorized based on their use and functionality. There are page structure tags, formatting tags, and control tags.

For now, I’ll leave you with this, and in the next blog post, we’ll dive deeper.

Let’s turn your idea into realized potential.