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 KZread 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!
Пікірлер: 72
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.
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!
Can you please do video on meta tags and seo
remember boys, the only one you need is ;)
@itzikca
10 ай бұрын
Lol absolutely
@TechtalkAi2762
10 ай бұрын
That where you make the dive grid or flex box div the only one you need more then others
@lunaticberserker5869
10 ай бұрын
@@TechtalkAi2762 You need to be skilled to be able to center a div.
@Someone-vg6jk
10 ай бұрын
Nah,semantic html for SEO😔
@TechtalkAi2762
10 ай бұрын
@@Someone-vg6jk it woks same as div but has special meanings for programmers and search engine robot
The article vs. section always confused me, and you made me understand their differences in a very clear way. Thanks mate!
The explanation of Strong and em tag.💯
I'm so glad I found this channel😁. It was hard for me to find creators that explain these in a way I understand.
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.
I love how much you talk.
Awesome! Well explained
I love your content .You are awesome....keep teaching us Sir
awesome explanation!
All along have been using the content tags the wrong way. Great video. have added the 1% daily on this thanks.👍👍
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.
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.
Thank you
Most applicants I review: "I will use only div. Oh, and I'll nest a inside an tag. This is fine." Me:
Another great video! I love that you used Smitten Kitchen's site as an example for the tag! Her oatmeal raisin cookies are amazing!
thank you
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
10 ай бұрын
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 😅
...excellent
You only need one tag in : ! One tag and a ton of CSS to emulate all other tags. :)
nice video
so is it tag or element, since it doesn't have a closing tag, the entire tag is also always an element.
@KevinPowell
10 ай бұрын
It's both 😅 - It's a self-closing tag, and by definition, an element.
7:08 that other type of list, are you referring to DIR, MENU, or DL?
so next essential CSS for beginners plz :)
@KevinPowell
10 ай бұрын
It's in the works, but won't be ready for a little bit :)
Niiiice!
I started 20 years ago (sadly our new cms (content AI hasn't e html section)
I love you too Kevin
Wonder if the screen readers will also blush when saying LOVE like that.. Just kidding, cool video.
I want to design a card so for that is it right to use article as html tag ?
@KevinPowell
10 ай бұрын
Often, yes. Depends a little on the context, but a lot of the time articles work.
I am very ergerly on... #NewbieTuesday Sections within articles, not the other way around. I'll remember that!
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
10 ай бұрын
I honestly have no idea, it was just a good example I found looking around online 😅
118 elements? Where did I hear that before... Ah :( In chemistry when I FAILED IT
❤🔥🔥
What's the other type of list?
Why didn't you mention description lists? They aren't deprecated or obsolete.
STRONG is short for “strong emphasis” not “strong importance”
You mean div tags?
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
10 ай бұрын
Did I not? Oh no 😅 - Bit of an oversight on my part there
@darthdzl
10 ай бұрын
@@KevinPowell Hey, it happens. 😁 Just wanted you to know.
💙💙💙💙💙👍💛💛💛💛💛💛
I'm guilty of using headings for styling purposes instead of for organizing page content :(
@goodshiro10
10 ай бұрын
at least you're not the only one
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
10 ай бұрын
Good point, I should have mentioned it for sure.
@njordholm
10 ай бұрын
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.
The only element you need is TITLE.
Two different types of lists.... or three.... LOL
@KevinPowell
10 ай бұрын
There is as well, but I wouldn't include that one as essential at the very start 🙂
@Greg8872
10 ай бұрын
@@KevinPowell true, though I feel it is one of the ones that has some good uses but it overlooked.