(click anywhere to close)
OPEN MENU

[HTML5] Tags & Elements

category: Website | course: HTML5 | difficulty:

Tags define elements. An opening tag signals the start of a certain element, and a closing tag closes it. Which tag you use defines which element is created, that is, in what way the text inside the element is categorized or formatted.

HTMLTagsElements

NOTE: Hover over code examples to make a test button appear. Click it to test or see the code in the live HTML editor

Nesting Tags

Because tags define groups within your webpage, you will also have to put smaller elements inside of bigger ones, and those inside even bigger ones, until you reach the top of your document. This is called nesting tags, and you can nest as many tags inside others as you like (as long as you properly open and close them). However, it is recommended to not create a very deep nesting structure, because it’s hard for you to understand, and takes more loading time.

<atag>
	<anothertag>
		<lasttag>
			Content
		</lasttag>
	</anothertag>
</atag>

Self-closing Tags

A number of elements that are self-closing exist, because they never have any text that could be put between opening and closing tag. They require a special type of tag: <tagname />

HTMLSelfClosingTag

Layout & Semantics

Most tags have some standard design rules applied to them. For example, a heading will automatically be bigger than a paragraph. It’s therefore easy to get into the habit of misusing certain tags to get a layout you want.

Don’t. HTML is for marking up your webpage, for setting up a basic structure. CSS – the next language you should learn after HTML – is for layout. A common expression in the web world is “keep semantics and design completely separate”, which simply means that you should choose your HTML tags based on what the data inside the element means.

Text inside paragraph tags should be a paragraph, text inside a heading should be the headline of an article, text inside an emphasis tag should be in need of emphasis – you get the idea. HTML5 introduced a lot of semantic elements, which will be discussed in the last few chapters, but for now remember that we’re doing absolutely nothing with layout or design just yet.

Comments

Just as with any language, HTML provides the opportunity for the developer to add comments to the code. When the page is interpreted by the computer comments are completely ignored, which means they don’t add to loading time or change the page in any way – they only increase file size a tiny bit.

You can use comments to explain why you wrote certain parts in a certain way, what you still have to do, or to quickly include/exclude blocks of HTML to test which one works better.

Comments work like this:

<!-- This is a comment about something -->

Important Notes

Everything in your HTML file needs to be structured using tags, which means HTML ignores whitespace and hard returns.

If you type multiple space characters after each other, they are automatically reduced to a single one. If you want to prevent that, you need to add a non-breaking space:&nbsp;

If you want a return (or enter), you need to add the break tag: <br/>

I want three spaces here: &nbsp;&nbsp;<br/>
And that was a line break<br/>
And another one<br/><br/>
Lots of linebreaks here.

But, keep in mind what I just told you about semantics. If you want some white space between two paragraphs, use a paragraph tag for that, not one or two <br/> tags. If you want some space between certain (emphasized) words, consider styling them with CSS later instead of using a lot of non-breaking spaces.

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
How do you add a non-breaking space?
A
Use <br />
B
Use <-- TEXT ->
C
Use &nbsp;
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)