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.
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.
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.
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.
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.
Deep dive into everything about HTML body elements here.
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.
- Hover over the title of your file and right click.
- 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.
That's it!
Want to learn more about HTML Elements? Check out MDN's full list of HTML elements and what each element does.
Resources
UCB full-stack development boot camp lessons and MDN web docs
Did you notice any errors in my code? Let me know in the comments (respectfully)!
Top comments (0)