Everything you see on the web uses HTML, no matter how fancy the website is. HTML stands for Hyper Text Markup Language, and it provides the basic structure and layout of a web page. If you want to learn how to create your own websites, HTML is a great place to start.

HTML elements and attributes work very closely together, and they help set the structure and style of your site. 

Elements: The Building Blocks

Your website is only limited by your imagination and the foundation of HTML you create. Elements allow you to create the “big picture” of your site. They define your structure, and they come in many different forms. Here are a few examples:

The Heading Tag - Known as the h tag for short, these HTML elements define different levels of headings. <h1> is the largest heading – this would be used for things like the main title or most important concept of a page. The h tags go all the way up through <h6>. The higher numbers represent subsections of a page. For example, <h2> is often used for subheadings under the main heading. 

The Paragraph Tag - This is used for exactly what it sounds like. Whenever you have a block of text, it’s more often than not sitting inside a <p> tag. 

The Image Tag - This particular tag, <img>, represents an image you’d like to display on your website. 

The Link Tag - <a> is used anytime you need to link to another page. These links can be internal (linking to somewhere in your own website), or they can be external (linking to another website).

Most elements require an opening and closing tag. For example, if I wanted to write a block of text using the paragraph tag, I’d do it like this:

<p>This is a block of text.</p>

<p> is the opening tag, and </p> is the closing tag. Notice there is a forward slash in the closing tag. Some void elements don’t require a closing tag. Here are a few examples:

<br> - line break

<hr> - horizontal line

<img> - image

These void elements don’t need any info between the opening and closing tags, so the closing tag remains optional.

Attributes: Adding Style and Function

Now that we’ve got elements squared away, let’s take a look at attributes. Attributes basically just provide information to elements. They tell elements how to look and function. They can tell the element what color and size to be, what image to display, what URL to link to, among other things.

Here are some examples of attributes;

style: this attribute does exactly what it says. It provides style to an HTML element. You can use this attribute to set the font-size, color, background, and more. The code below shows how to add color to text:

<p style="color: red;” >This text is red.</p>

href: this attribute stands for hypertext reference. It is used inside the <a> tag and specifies the destination link. For example, the code below is a link to www.google.com.

<a href="https://www.google.com">Google</a>

src: this attribute is used with the <img> tag. It tells the browser where to find the image to display. For example, the code below is displaying “image-to-display.” Notice how it is a void element, and no closing tag is needed.

<img src="https://www.examplesite.com/image-to-display">

A Dynamic Duo: Putting Elements and Attributes Together

As you can already see, elements and attributes work hand in hand. Attributes go inside of the opening elements. Let’s take a look at a bigger example that shows the two together:

<h1>My Cool New Website</h1>

<p>This is a paragraph explaining why my website is so cool.</p>

<img src="images/cat.jpg" style="width:200px; height: 200px; border:1px solid blue;">

<a href="https://www.google.com" style="color: green; text-decoration: underline;">Google</a> 

In that snippet of code:

  • <h1> creates the main heading.
  • <p> holds the main text of the page.
  • <img> displays a cat image, and the src attribute tells the browser where to find it. There’s also a style attribute that gives the image a specific height and width, and it also adds a blue border around the image. 
  • <a> creates a link to Google using the href attribute. The style attribute makes the link green and underlines it.

Now that you’ve got elements and attributes in your toolbox, you’re well on your way to building websites. You’ll quickly want to jump into CSS (cascading style sheets). CSS will put you on the path to designing impressive-looking sites. You’ll use the attribute class to set specific styling to an HTML element.