The only tags you need when first learning HTML

📒 Get the Only Tags you need to know (for now) cheat sheet here: kevin-powell.ck.page/0399076ad3
When you're first learning HTML, it starts nice and simple, often with a paragraph tag and then heading tags. Then you add in lists, links, images, em and strong, and the list of elements just keeps getting longer and longer.
So in this video, I'm looking at the 20-25 essential elements that are good to know early on, grouping them into three categories to help simplify things even more.
You'll need more than just these over time, but when you're just starting, this is more than enough to get you going 🙂.
🔗 Links
✅ The cheat sheet: kevin-powell.ck.page/0399076ad3
✅ My HTML & CSS for beginners playlist: • HTML & CSS for beginners
⌚ Timestamps
00:00 - Introduction
00:47 - The categories
02:15 - DOCTYPE
02:40 - html
03:07 - head and body
03:50 - title
04:11 - style and link
05:01 - tags vs elements
05:32 - paragraphs and headings (h1 to h6)
07:05 - ordered and unordered lists, and list items
07:42 - strong and em
08:49 - the a tag (links)
09:42 - span
10:39 - layout related elements
11:09 - the main
11:36 - header
12:19 - footer
12:44 - nav
13:22 - article
14:08 - section
14:44 - multiple headers and footers
15:34 - div
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@lunaticberserker5869]

remember boys, the only one you need is ;)

[@itzikca]

Lol absolutely

[@TechtalkAi2762]

That where you make the dive grid or flex box div the only one you need more then others

[@lunaticberserker5869]

@@TechtalkAi2762 You need to be skilled to be able to center a div.

[@Someone-vg6jk]

Nah,semantic html for SEO😔

[@TechtalkAi2762]

@@Someone-vg6jk it woks same as div but has special meanings for programmers and search engine robot

[@rafacalvodev]

The article vs. section always confused me, and you made me understand their differences in a very clear way. Thanks mate!

[@NathanSan1144]

These are great, I love the explanation that comes with these beginner videos. I can find tutorials anywhere that tell me about h1, h2, h3 elements, but having you explicitly say things like "only have 1 h1 tag in your page, here's why" is such a valuable piece of information that often gets glanced over. It's like having a survival guide telling you "eat these berries, they're okay" instead of reading a book with a list of edible berries.

[@dgenerationx5220]

Can you please do video on meta tags and seo

[@jonathanschwartz8]

Kevin, I’ve been coding for 20 years but my knowledge base is like Swiss cheese. At retirement age, I decided to start over with this course. Sure enough, I learned new things. Too many to admit. Thanks!

[@EsmeiLaura]

I'm so glad I found this channel😁. It was hard for me to find creators that explain these in a way I understand.

[@Khawar_Mehfooz]

The explanation of Strong and em tag.💯

[@MasayaShida]

I am trying to make an HTML tutorial in my local language and this has helped me alot to make things less scary for people just getting started. Thank you.

[@ssava_ema]

All along have been using the content tags the wrong way. Great video. have added the 1% daily on this thanks.👍👍

[@kamrulislamshantow1966]

I love your content .You are awesome....keep teaching us Sir

[@bumbleguppy]

Oh man, that takes me back...I remember back in the day when I was first starting and if digital content could get dog-eared, my HTML cheat sheet would have been down right furry with fingerprints and coffee stains.

[@dezlymac]

Awesome! Well explained

[@bulelanibotman]

awesome explanation!

[@Brainspoil]

I very much appreciate this video. It explained some of the things I've been having some problems grasping fully, like article, section and div. You explained it in a very easy and understandable way. Thank you.

[@fwily2580]

I love how much you talk.

[@mahadevovnl]

Most applicants I review: "I will use only div. Oh, and I'll nest a inside an tag. This is fine." Me:

[@TheCocoaDaddy]

Thanks for posting this! I have a question about the use of terminology (tag vs element). Generally speaking, I'll refer to things on the page as "elements" unless I'm talking about some specific in-line attributes. Then, I'll use "tag". With regard to em, strong, and span, is it ever appropriate to refer to them as "elements"? You're a genius and I recommend your work and classes to everyone I know who works with HTML! Thanks again! (Sorry if this comment was posted twice)

[@KevinPowell]

tag is really the opening and closing bits, and when you take them and everything in between, it's an element, so yeah, it is a strong element, but it does seem a bit funny to think of it that way 😅

[@AxxionMarketPlace-iu6ri]

Thank you

[@frittex]

nice video

[@MochaPlayer1]

Another great video! I love that you used Smitten Kitchen's site as an example for the tag! Her oatmeal raisin cookies are amazing!

[@peterlistig2020]

You only need one tag in : ! One tag and a ton of CSS to emulate all other tags. :)

[@kszyh_]

so next essential CSS for beginners plz :)

[@KevinPowell]

It's in the works, but won't be ready for a little bit :)

[@27sosite73]

thank you

[@Xeratas]

so is it tag or element, since it doesn't have a closing tag, the entire tag is also always an element.

[@KevinPowell]

It's both 😅 - It's a self-closing tag, and by definition, an element.

[@sldimaf]

Niiiice!

[@martinsenoner8186]

I started 20 years ago (sadly our new cms (content AI hasn't e html section)

[@lamejehn6000]

118 elements? Where did I hear that before... Ah :( In chemistry when I FAILED IT

[@GR_BackingTracks]

I am very ergerly on... #NewbieTuesday Sections within articles, not the other way around. I'll remember that!

[@travellingstranger3378]

...excellent

[@NicholasShanks]

7:08 that other type of list, are you referring to DIR, MENU, or DL?

[@CodingWayz]

Wonder if the screen readers will also blush when saying LOVE like that.. Just kidding, cool video.

[@parkvictor1940]

Thanks Kelvin! this is great work you are doing here, keep up the good work. I am becoming seriously interested in CSS and demystifying it. However, I desire your help here. The contents of the business training book you used as an illustration in this tutorial appears captivating and interesting to read. I want to know the business training book, "title" and the publisher (Author). Business: what's it all about? 2 Purpose of a Business 4 The Nature of business Operation 5 Ownership structure of a business 6 Sole Proprietorship 6

[@KevinPowell]

I honestly have no idea, it was just a good example I found looking around online 😅

[@sujoykrhaldar]

I want to design a card so for that is it right to use article as html tag ?

[@KevinPowell]

Often, yes. Depends a little on the context, but a lot of the time articles work.

[@GiorgiKavtaradze-cy1ye]

❤🔥🔥

[@franciscobarria3647]

I love you too Kevin

[@NicholasShanks]

STRONG is short for “strong emphasis” not “strong importance”

[@re.liable]

What's the other type of list?

[@Anonymous-zi5wr]

Why didn't you mention description lists? They aren't deprecated or obsolete.

[@darthdzl]

Great video. One thing: strong and em...I don't think you got around to actually saying that "em" defaults to being shown as italics.

[@KevinPowell]

Did I not? Oh no 😅 - Bit of an oversight on my part there

[@darthdzl]

@@KevinPowell Hey, it happens. 😁 Just wanted you to know.

[@nnaemekasama]

You mean div tags?

[@Plykiya]

I'm guilty of using headings for styling purposes instead of for organizing page content :(

[@goodshiro10]

at least you're not the only one

[@VolodymyrInTech]

💙💙💙💙💙👍💛💛💛💛💛💛

[@Joey-ni8kh]

this is great however I think you missed an opportunity by not also stating that elements have a default display style and explain what that is. P is block, span is inline etc. why important to get the look you want.

[@KevinPowell]

Good point, I should have mentioned it for sure.

[@njordholm]

In the kind of same direction, I would have also mentioned the tag, you can use, to create a single line break within a paragraph. I sometimes also use it instead of a to visually break up a sentence which contains a (longer) enumeration, without the need to undo preformatting of lists. Sth. like this: Kevin spoke about the basic html tags in this video, which are html, body, header, main, footer, and a couple more. instead of this: Kevin spoke about the basic html tags in this video, which are html, body, header, main, footer, and a couple more.

[@NicholasShanks]

The only element you need is TITLE.

[@Greg8872]

Two different types of lists.... or three.... LOL

[@KevinPowell]

There is as well, but I wouldn't include that one as essential at the very start 🙂

[@Greg8872]

@@KevinPowell true, though I feel it is one of the ones that has some good uses but it overlooked.