Become familiar with HTML tags, their attributes, and properties, to learn how to use various elements when creating web pages.
Understanding the nature of HTML tags isn’t too big of a challenge, but they’re definitely super important. You’ll be using HTML consistently and the practice will ease their novelty.
Once you get the hang of HTML, you’ll have established a strong base for your coding skills!
What is HTML?
HTML stands for Hypertext Markup Language and it’s the language that adds content to a webpage. The writing and images as well as various components like lists, buttons, and forms that make a website are all added via HTML and then styled with a language like CSS.
Think of HTML as a template that contains the details of the webpage. CSS helps you manipulate those details to make them appear in certain ways.
A very basic HTML document structure boils down to:
<html>
<head>
<title>Tab Title NOT Website Title</title>
</head>
<body>
<div>I'm a box holding your content</div>
</body>
</html>Brief breakdown of HTML elements
| < > | Opening Tag |
| </> | Closing Tag |
| <html> | Identifies Document Language |
| <title> | Gives Tab Title |
| <body> | Content of Page |
| <div> | Division Tag |
Click here for a list of various HTML tags.
A <tag> represents an HTML element such as a paragraph (<p></p>) or an image (<img>) or an empty container (<div></div>).
Notice how p & div have 2 parts:
- The opening tag
<p>or<div> - The closing tag
</p>or</div>
Now take a look at <img>. It doesn’t have a closing </img> tag. Why? Because <img> is a self-closing tag so it doesn’t require you to manually close it.
You will find some self-closing tags written with a trailing backslash as <img />. But simply writing <img> is fine and it’s what we’ll be doing from here on out.
HTML elements, attributes, and properties
Let’s go over basic HTML terminologies. We already established a tag like <h1></h1> is an HTML element.
Each HTML element can take different attributes like style. Or for images you will specify the image source (src). What will this look like?
<h1 style="some style">I am a H1 element</h1>
<img src="this is your pic's location">The style attribute can have many different styling properties like color, font-size, and width or height. So if we want to get a title that is red and 60px (pixels is a measurement unit) our tag will look like this:
<h1 style="color:red; font-size:60px;">I am a H1 element</h1>A little weird right? The syntax (aka method of writing) comes from CSS, our styling language which we’ll tackle in another post.
Usually, CSS is written in this format:
HTML element {
Css property : value;
}Example:
h1 {
color : red;
font-size: 60px;
}You can see we keep the same writing style of our property: value; pair.
Styles inside the HTML tags are known as inline-CSS and represent one of three ways you can include CSS in your document. We’re getting a little ahead here, this isn’t a post about CSS (yet) so if you’re saying woah there it’s a-ok.
Note: Put important keywords in
<h1>tags as they’re more likely to appear in Google searches. For example, if you are a blogger, you’ll want to place the title of your post in<h1>tags. There should only be one<h1>per page.
HTML Stylings
Although CSS is the main way to customize default styles, you can use a few built-in HTML stylings that allow you to transform text without any CSS.
| <b></b> or <strong></strong> | Bold |
| <i></i> or <em></em> | Italicize |
| <u></u> | Underline |
| <sup></sup> | Superscript |
| <sub></sub> | Subscript |
| <del></del> | Deleted |
| <ins></ins> | Inserted |
| <hr> | Horizontal Line |
| <mark></mark> | Highlight |
In your code editor it will look something like this:
Get some practice by giving them a try! Then render the file in your browser to see the different styles.
Don’t know how to render an HTML file in the browser? We cover that right here.
All of these text transformations can be performed with CSS and, in most cases, it’s recommended you do so to keep your HTML code clean.
Some styles like <ins> and <u> do the same thing — underline text — but have different semantic meanings.
In this case, <ins> indicates an inserted item while <u> is for visually showing spelling errors in the text.
The anchor tag (<a></a>), which is used to insert links, also underlines text by default.
Even though <u>, <ins>, and <a> underline text, each does so with a different purpose and it’s important to keep that in mind. Since most people expect underlined text to be a link and clickable, you’ll want to avoid underlining text in general and opt for other methods of adding emphasis (like bold or italic).
Manual Lines
Line breaks in the code editor don’t translate as line breaks on the web page.
In the image above we single space every line of text in the <p> tag. But in the browser, the text on the page renders as a single line as shown below.
For each sentence to render on a different line, you can either use <p> for a new paragraph or <br> which is literally a tag that adds line breaks.
You can use <br> inside a <p>. It’s self-closing (there’s no need for </br>) and, if you want more than one line break, you only need to add more <br>.
Of course, this is only ideal for certain simple cases like when you need to break the flow of the text or add a single spacer. You’re not going to be multiplying <br> to manipulate space on your web pages!
HTML elements (aka tags) use different amounts of space. To demonstrate this we will work with three elements:
<div>an empty container<span>sections-off text usually within a paragraph<p>paragraph, we’re familiar by this point
First, let’s make a red container by adding a style attribute to the <div> with the property background-color set to red and a height of 200px.
<div style="background-color:red; height:200px;"></div>We don’t use the color property here because color is only meant to change text color.
Next, section part of a sentence and make it red by using <span> to isolate and style with the property of color set to red. Then add a yellow background to the <p> and an aqua background to the <span>.
<p style="background-color:yellow;">I am a normal sentence <span style="color:red; background-color:aqua;"> and I'm the red part</span>!</p>See how <span> can be useful?
Third, add a simple <p> that has a background color of yellow.
<p style="background-color:yellow;"> I'm a sentence with some sass!</p>In your code editor, it will look something like this:
And in your browser:
It’s clear from the background colors that the <div> and <p> elements stretch across the width of the page.
However, the <span> takes only the width of the text it encases (notice how our aqua color doesn’t go across the page?)
This is because <div> and <p> are block elements while <span> is an inline element. These are properties of their display that specify how much space each of the elements takes.
Block elements
Block elements occupy an entire line. They take the width of their parent element and have an automatic height based on their content.
In this case, the parent element is the <body> so the width of each block element fills the entire horizontal space. The height is still automatic; try removing the height property we set on the <div>‘s style attribute and notice how our container disappears entirely from the page!
<div style="background-color:red;">I'm missing a height</div>
The browser doesn’t really know what to render considering we’re telling it to give us an empty box of no set height. Sometimes intuitive things need to be broken down explicitly when dealing with code.
But let’s now give our container some content so it’s not empty; don’t do anything with the height.
<div style="background-color:red;">I AM A CONTAINER that's not empty anymore!</div>
Oho! Now our <div> looks pretty darn similar to our <p>. In fact, you probably can’t tell the difference in the browser if you don’t see the code.
Again, it takes on the full width of the page (as inherited from the parent <body>). But the height now is automatically set to that of the content inside the <div>.
What we just did with the <div> we can also do with the <p>. So you can specify a set height for <p> instead of letting the element take on automatically the height of its contents.
<p style="background-color:yellow; height: 100px;"> I'm a sentence with some sass!</p>
Inline elements
Unlike block elements, inline elements don’t take an entire line. They occupy only the space defined by the contents of the tags.
Take our <span> as an example. The width and height is automatically adjusted to that of the contents within the <span>.
Even if you add a line break inside the <span> or set a width for <p> (the <span>‘s parent element) to change the horizontal space <p> can occupy, the width and height of the <span> will still be determined by its contents.
<p style="background-color:yellow;">I am a normal sentence <span style="color:red; background-color: aqua;"> and I'm the red part<br>awesome right</span>!</p>
<p style="background-color:yellow; width: 50px;">I am a normal sentence <span style="color:red; background-color: aqua;"> and I'm the red part<br>awesome right</span>!</p>
Think about this: even though you just set the width of the first <p> on this last exercise, the second <p> (the one without a <span>) is still on the next line. It doesn’t move to take the empty space now available next to the first <p>.
Interesting, huh?
The display properties of block and inline are very important when working with the layout of your web page. We will revisit them later on when building complete web pages.
Recap: Block elements take an entire line, occupying the full width of your horizontal space. Inline elements only occupy the width of the content within the tags.
Now, this isn’t everything you can possibly know about HTML tags but it’s sufficient to start writing HTML code. The rest will come with practice – all that matters is: did you enjoy it?