Head Tag in HTML | An HTML5 Head Element Tutorial
Вставка
- Опубліковано 16 лип 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
The head tag in HTML contains much information about your web page. In the HTML5 Head Element tutorial you will learn all about the meta tag and the metadata it holds as well as how the link tag can pull other resources into your page.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of an HTML for Beginners tutorial series playlist:
• HTML Tutorials for Beg...
🔗 Starter Source Code: github.com/gitdagray/html_cou...
🔗 Download the favicon file here: github.com/gitdagray/html_cou...
Head Tag in HTML | An HTML5 Head Element Tutorial
(00:00) Intro
(00:05) Welcome
(00:25) Setup
(00:57) Adding metadata to your HTML file
(02:43) Adding a favicon to your web page
(04:43) Head element content is not visible on the page
(05:02) Adding a link to a CSS stylesheet
(07:11) Validate your HTML code
🔗 All Resources for this HTML Tutorial Series: github.com/gitdagray/html_course
⚙ Web Dev Tools:
Chrome Browser: www.google.com/chrome/
Dark New Tab Chrome Extension: chrome.google.com/webstore/de...
Visual Studio Code (VS Code): code.visualstudio.com/
Prettier VS Code Extension: marketplace.visualstudio.com/...
vscode-icons VS Code Extension: marketplace.visualstudio.com/...
Github Themes VS Code Extension: marketplace.visualstudio.com/...
W3C HTML Validator: validator.w3.org/
📚 References:
MDN HTML: developer.mozilla.org/en-US/d...
MDN HTML Elements Reference: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the HTML head element and metadata helpful? If so, please share. Let me know your thoughts in the comments.
#html #html5 #head
The HTML head element can be confusing and is often overlooked by beginners because the contents of the head element do not appear on the web page. However, the metadata and other contents of the head element are very important. This short tutorial shows how you can add additional metadata and other resources to your web page by including them inside the head element. Looking for more web dev tutorials? I have many on my channel: ua-cam.com/users/davegrayteachescode
Thank you very much for teaching me the basics of html. Planning to watch all of your videos related to web development. Great job!!!
Thank you so much for HTML tutorials.I am so grateful from that tutorials.
Thank you for such a great tutorials, it helps a lot on the way to learn and so easy to understand even for people with low level of English. 🔥
I use the same long comment under all your videos to avoid clutter and promote your videos to more people. 😉
Wow can’t believe you only have a few hundred for this awesome content
thank you Dave really its really amazing tutorial, keep going pro i love your videos
Thank you, Saeed 🙏
It's weird I didn't get a notification for nor the next 2 videos 🤔
anyways, it's a great back-to-basics series even for someone who already knows about it,
Thanks Dave,
Thank you, Ahmad. 🙏 Ive found I always learn something new from a refresher course. I'm glad you like it my friend!
D!!! Awesome!! Thank you my brother!!
You're welcome! 💯🙏
THANK U; SIR,
You're welcome!
This video series is my first attempt at learning html. 100% newbie. I enjoyed the first one and look forward to seeing the rest. I'm not sure where to find the resources to download the icon image you mentioned at 4:00 in the video. I've spent a lot of time googling this and have been down countless rabbit holes. Could you elaborate a bit more or recommend resources that may help me narrow my search for additional information? TIA!
Hi Timothy - there should be a link in the description for the source code. It will take you to all of the resources for this HTML series. It is a Github link. My top suggestion (aside from this series) is to create an account at freeCodeCamp.org and work through the HTML exercises there. It will go well with these tutorials. Keep at it! 💯🚀
Is there a specific convention out there you follow when you arrange the order of elements/tags in the head element? From what I have seen most of the time the tags go at the top and linked stylesheets go below the element. Is this just down to preference or is it a convention that is designed to help with readability across HTML documents when looking at the head element?
The answer to this is debatable - and opinions definitely vary. If you Google, you will find various discussions like this one: webmasters.stackexchange.com/questions/11623/order-of-html-meta-tags
My answer: If you are working on a team, follow the pattern the team uses. Otherwise, you can look at examples - like starting your page in VS Code with the ! shortcut to create the page skeleton quickly. See what others have done and what works for you.
lots of appreciation sir lots of love from PAKISTAN
Thank you and hello 👋 to Pakistan!
Hello! Thank you Dave, this has been veru insightful. I am having issues with the downloading and insertion of the HTML logo you added. Please help
If you followed my code and still don't see it, you may need to clear your cache. On Windows, I hold down the Shift key and refresh the page.
Would it be incorrect to refer to a meta tag as an element? As I recall from the first part of this HTML series, you said that they aren't to be used interchangeably. If that's the case, would other "self-closing" tags such as not be referred to as elements, but just tags? Especially since they don't enclose any content. It seems that sources such as W3schools refer to as being tags, not elements.
It does seem that W3Schools at least use the terms "element" and "tag" interchangeably, when talking about the horizontal rule.
People use one term for the other all of the time so no worries about getting them exact. An element usually has content between opening and closing tags.. but I say "usually" because - and this is where it gets confusing - some don't. For example you mention the horizontal rule. MDN clearly states that it is an element: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr ...I use MDN as the source of truth for reference. If in doubt, I always check that site first.
You talked about the type attribute not being required when linking a CSS stylesheet, is the same true for the favicon you linked above?
Yes. From the course resource links in the description - MDN: developer.mozilla.org/en-US/docs/Web/HTML/Element/link ..Good discussion on this page - look under "Attributes" and then find "type".
Hi Dave, I'm new to your channel and will be watching all of your videos. I'm sorry to add to the icon problem but I have a issue. I found the icon downloaded it to the same html folder on my hard drive. However after doing exactly what you did step by step it doesn't load the image in my browser. The only thing I can thing is that I need a extension or the edge browser doesn't support it. Do I need Google Chrome browser or is there a different problem. Thank you for your time.
The favicon must be what you are referring to because we link it in the head element. It only shows in the tab at the very top of the browser. It is supported in nearly all modern browsers: caniuse.com/?search=favicon
@@DaveGrayTeachesCode thanks for the link I figure out the problem from that link thank you. Your the bomb.
I had the same problem with Chrome. after I updated my chrome, the problem was solved.
Where can I download an html5 icon to put in the html.png file. What resource are you using?
There is a link to the course resources on GitHub in the description of the video.
@@DaveGrayTeachesCode thank you I will check it out.
Hi Dave, when i click on the link to download the orange shield shaped icon image, it just takes me to a new tab with a tiny orage shield image. Nothing downloads. What do I do? Do I do a screen clipping of it and try to crop it small? I feel like that probably isn't what you intended.
Nevermind, I went online and found a way to make any image into an icon and I made a super cute blue butterfly icon.
You should be able to "right click" on an image (Windows), and I think Mac is (cmd+click) - and then have the option to save the image.
Hi Dave,
I noticed comments that are nine months old about getting the favicon to show up. I am adding this question here so that I am not necroing an older comment.
I have been over this section of the video numerous times and I still cannot get the favicon to show up. I am quite certain that the icon is in the same directory as the index.html file. Maybe it is my 80-year-old eyes and I have done something incorrectly. But I cannot figure it out.
This is the code that I copy-pasted from the Visio editor:
Does anything jump out at you or the other people here that I have done incorrectly?
Cheers,
Alan
Sometimes you have to refresh the page and clear the cache. I do this in Windows by holding down the shift key while refreshing the page.
@@DaveGrayTeachesCode
Thank you Dave,
I think I just needed to refresh the page as you said. I tried refreshing the page before to no effect. Afterwards, I shut down my browser and came back to it, and the code seemed to work. I will remember that hint about holding down the shift key while clicking on refresh. I am using Firefox, not your favorite browser I know, but over the years I have built up an intricate series of bookmarks. I should probably consider also viewing my test site in Edge and Chrome. I have both of these on my computer.
I am enjoying the challenge of going through these videos. I maintain several WordPress websites and am acutely aware of my lack of knowledge of HTML and CSS. I have used bits and pieces of them over the years but never made a systematic study. You are very clear in your presentation, and I appreciate that.
Cheers,
Alan
Where can I find the resources to download the icon from? please?
The full course resources are on Github and linked to in the description of the video.
why the VCS doesnt read the image i trying to put on the icon
i did the same intruction as you did help.
You can view my source code at the link in the description for course resources to compare to your code. Also, use those course resources to download the images and icons you need from my code repository for the lesson.
same problem, how did you solve it?
finished "head tag in HTML"
How do you download the icon from the resources?
You can follow the link to the resources, go to the lesson 2 folder, click the image file, and then right-click and choose 'Save As' - if you are using Windows. Or you can download all of the resources for the full course at once from Github - click the green "Code" button for choices when you visit the Github page: github.com/gitdagray/html_course
@@DaveGrayTeachesCode Hi Dave, thank you for replying I appreciate it more than ever, thank you to everyone helping out!
Yikesssss...when I link my css stylesheet my editing got removed after refreshing 😭
Hi there,
After I go to link the main.css stylesheet and put it into the validator I get: Unknown error java.lang.Exception: import file://localhost/main.css: Operation not permitted
Why would this be happening to me? May I please have some help to understand and get my code to validate?
I created the file and followed all the steps.
So I ended up pasted the entire location of my css file and it validated BUT my webpage is white now, not the color #333. Help please!
I even deleted everything out of my recycling bin so it wouldnt pick up any old css files....
My file main.css from visual code SAVES AS main ONLY in my computers folders....WHY??? That has to be the reason why it won't link the file correctly. What do I do?
I cleared the editor and command history, but I get the same error!