HTML Elements 101
Tags: beginners, html, webdev, htmlbasics
Published: 2022-10-12 04:52:22

# Everything You Need to Know About HTML Elements as a Complete Beginner


_There's a lot to remember when you're creating your first website from scratch._

**HTML**, an acronym for **"Hypertext Markup Language"** provides the structure or "skeleton" for a website. 

It tells the browser what the website is about, what text to show on your display, and where the text should go on your screen. I've put together this cheat sheet of basic HTML elements so you can **start coding your first website today!**

After practicing HTML text on your own you'll have these elements committed to memory in no time. 

## What is an element?

An **element** is a label that communicates what type of content to display. 

Types of elements and examples include:
- **Text** elements `<p>`
- **Image** elements `<img>`
- **Heading** elements `<h1>`, `<h2>`, `<h3>Insert text here</h3>`
- **Head** elements `<head>`
- **Body** elements `<body>`
- **Title** elements `<title>Insert text here</title>`
- **List** elements (Ordered and unordered) `<li>insert one list item</li>`
- **Section** elements `<section class="card" id="name-section" />`
- **Metadata** elements `<meta charset="UTF-8" />` (read more about metadata below)
- **Style** element `<style>`
- **Base** element `<base>`

An element starts with an **"opening tag"** signaled by `<`, then the **element label** (i.e. `head`), and ends with a **"closing tag"** signaled by a `>` (i.e. `<head>`).

Information related to the element goes after the element tag and is followed by a set of angle brackets with a slash `</>`.

___

**Let's practice!** What code would you write to display a main heading that says **"HTML basics 101"?**. 

> 
_Hint: The element label for a main heading is `<h1>`._
Write or type what you think an HTML line of code for a header should look like.

>
Your code should look like `<h1>HTML basics 101</h1>`.

Now that we've practiced let's set up your first HTML line of code.
___
## How do I get started?
Before coding anything else in HTML, type in `<!DOCTYPE html>` to establish that HTML is the language you're using.

Note: The `!DOCTYPE` is **not** case sensitive but HTML as a language **is** case sensitive.

Your first line of code should look something like this.

![The first line of code for your HTML file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bivnasfeltagd1yx6msh.png)

### Next steps

Your second line of code defines what spoken language the website is written in. 

> 
For example, if you would like to use **English** text on your website your code would look like `<html lang="en">`. 
If you would like to write and display **French** text in your website try `<html lang="fr">`.

Here's what our HTML file looks like at this point.

![HTML elements 101 doctype and language set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj2131g1jjfw3o070oc0.png)

___

## What goes in the `<head>` element?

The head element communicates with your browser what to expect on your web page and helps users find your web page. 

**So what goes within the head element?**

- Metadata
- Title
- Style sheets (CSS)
- Scripts (JS)
- Templates

### What is metadata?
Metadata is information that includes information about the website. Metadata is not visible to users.

> 
For example, one type of metadata is **keywords**. Keywords are used to summarize the topic of your website page and improve search engine optimization (SEO). 

In code this looks like `<meta keywords="html,beginners,web development"> </meta>`

Another meta element is `<title>` which names the tab of your website. 

Read more about metadata [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta).

After reading more about metadata at the link above, experiment on your own and add some different types of metadata to your website.

Your file might look something like this now.
![HTML Head elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxleh2sqxh5gc94xcknz.png)

___

## What goes in the body element?

The body element contains what the user will see when they access your web page. This is the "meat" of your website.

Examples of body elements:
- Sections `<section>`
- Headings `<header>`
- Paragraphs `<p>`
- Ordered lists `<ol>`
- Unordered lists `<ul>`
- Images `<img>`
- Breaks `<br>`
- Dividers `<div>`

The most important elements here will be your text, sections, headers, and dividers to organize your words. 

### Add a heading

Start the body section with `<h1>` to title the website. Only use h1 once on your entire website. You can use h2, h3, etc for as many times as needed on your website.

Here's an example of what your code could look like.![HTML body head element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/untmjctpf03okij226tc.png)

Deep dive into everything about HTML body elements [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).

Play around with what you've learned and add some elements and text to your website. 

## SHORT CUT!

Now that we've reviewed the basic elements of HTML I can give you the short cut.

Create a blank new HTML file and type "!" into the first line. It will automatically populate a basic outline for your HTML code!

___

## How to view your website from VS Code

Assuming you are editing your HTML file in VS code you can see what it looks like in action by doing the following. 

1. Hover over the title of your file and right click.
2. Select "Open in Default Browser".

___

_Have fun making your website!_ You'll learn through trial and error. Here's a simple example of an HTML file with some basic body elements.
![HTML Example with multiple body elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6c2fkh76klhsd53m6i8y.png)

___

# That's it!

Want to learn more about HTML Elements? Check out [MDN's full list of HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML) and what each element does.

### Resources
UCB full-stack development boot camp lessons and [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML)

**Did you notice any errors in my code? Let me know in the comments (respectfully)!**