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

  • @NathanSan1144
    @NathanSan114410 ай бұрын

    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.

  • @jonathanschwartz8
    @jonathanschwartz87 ай бұрын

    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!

  • @dgenerationx5220
    @dgenerationx522010 ай бұрын

    Can you please do video on meta tags and seo

  • @lunaticberserker5869
    @lunaticberserker586910 ай бұрын

    remember boys, the only one you need is ;)

  • @itzikca

    @itzikca

    10 ай бұрын

    Lol absolutely

  • @TechtalkAi2762

    @TechtalkAi2762

    10 ай бұрын

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

  • @lunaticberserker5869

    @lunaticberserker5869

    10 ай бұрын

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

  • @Someone-vg6jk

    @Someone-vg6jk

    10 ай бұрын

    Nah,semantic html for SEO😔

  • @TechtalkAi2762

    @TechtalkAi2762

    10 ай бұрын

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

  • @rafacalvodev
    @rafacalvodev10 ай бұрын

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

  • @Khawar_Mehfooz
    @Khawar_Mehfooz10 ай бұрын

    The explanation of Strong and em tag.💯

  • @EsmeiLaura
    @EsmeiLaura9 ай бұрын

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

  • @MasayaShida
    @MasayaShida10 ай бұрын

    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.

  • @fwily2580
    @fwily25802 ай бұрын

    I love how much you talk.

  • @dezlymac
    @dezlymac9 ай бұрын

    Awesome! Well explained

  • @kamrulislamshantow1966
    @kamrulislamshantow19667 ай бұрын

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

  • @bulelanibotman
    @bulelanibotman10 ай бұрын

    awesome explanation!

  • @ssava_ema
    @ssava_ema10 ай бұрын

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

  • @Brainspoil
    @Brainspoil10 ай бұрын

    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.

  • @bumbleguppy
    @bumbleguppy10 ай бұрын

    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.

  • @AxxionMarketPlace-iu6ri
    @AxxionMarketPlace-iu6ri9 ай бұрын

    Thank you

  • @mahadevovnl
    @mahadevovnl10 ай бұрын

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

  • @MochaPlayer1
    @MochaPlayer13 ай бұрын

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

  • @27sosite73
    @27sosite736 ай бұрын

    thank you

  • @TheCocoaDaddy
    @TheCocoaDaddy10 ай бұрын

    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

    @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 😅

  • @travellingstranger3378
    @travellingstranger33788 ай бұрын

    ...excellent

  • @peterlistig2020
    @peterlistig202010 ай бұрын

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

  • @frittex
    @frittex10 ай бұрын

    nice video

  • @Xeratas
    @Xeratas10 ай бұрын

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

  • @KevinPowell

    @KevinPowell

    10 ай бұрын

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

  • @NicholasShanks
    @NicholasShanks9 ай бұрын

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

  • @kszyh_
    @kszyh_10 ай бұрын

    so next essential CSS for beginners plz :)

  • @KevinPowell

    @KevinPowell

    10 ай бұрын

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

  • @sldimaf
    @sldimaf10 ай бұрын

    Niiiice!

  • @martinsenoner8186
    @martinsenoner818610 ай бұрын

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

  • @franciscobarria3647
    @franciscobarria36477 ай бұрын

    I love you too Kevin

  • @CodingWayz
    @CodingWayz8 ай бұрын

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

  • @sujoykrhaldar
    @sujoykrhaldar10 ай бұрын

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

  • @KevinPowell

    @KevinPowell

    10 ай бұрын

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

  • @GR_BackingTracks
    @GR_BackingTracks10 ай бұрын

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

  • @parkvictor1940
    @parkvictor194010 ай бұрын

    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

    @KevinPowell

    10 ай бұрын

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

  • @lamejehn6000
    @lamejehn600010 ай бұрын

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

  • @GiorgiKavtaradze-cy1ye
    @GiorgiKavtaradze-cy1ye10 ай бұрын

    ❤🔥🔥

  • @re.liable
    @re.liable9 ай бұрын

    What's the other type of list?

  • @Anonymous-zi5wr
    @Anonymous-zi5wr4 ай бұрын

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

  • @NicholasShanks
    @NicholasShanks9 ай бұрын

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

  • @nnaemekasama
    @nnaemekasama10 ай бұрын

    You mean div tags?

  • @darthdzl
    @darthdzl10 ай бұрын

    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

    @KevinPowell

    10 ай бұрын

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

  • @darthdzl

    @darthdzl

    10 ай бұрын

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

  • @VolodymyrInTech
    @VolodymyrInTech10 ай бұрын

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

  • @Plykiya
    @Plykiya10 ай бұрын

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

  • @goodshiro10

    @goodshiro10

    10 ай бұрын

    at least you're not the only one

  • @Joey-ni8kh
    @Joey-ni8kh10 ай бұрын

    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

    @KevinPowell

    10 ай бұрын

    Good point, I should have mentioned it for sure.

  • @njordholm

    @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.

  • @NicholasShanks
    @NicholasShanks9 ай бұрын

    The only element you need is TITLE.

  • @Greg8872
    @Greg887210 ай бұрын

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

  • @KevinPowell

    @KevinPowell

    10 ай бұрын

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

  • @Greg8872

    @Greg8872

    10 ай бұрын

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