Meta Tags and The Head of HTML Documents

► The head section of an HTML document contains special information about the document, including the title of the web page, links to stylesheets, and links to external resources like fonts.
The title of the page is what is shown in the browser tab, and it is also what is shown as the title of Google search listing results.
The head also contains meta tags that provide information that helps the browser and search engines to understand the page content contextually.
In this video, we will examine the most common meta tags and learn how to add CSS, and JavaScript to our web pages.
► Timestamps:
0:00 Start
0:39 The title element
1:26 The wide variety of meta tags
1:58 Over to VS Code
2:26 The lang attribute
3:03 Open the file with Live server
3:32 The meta description tag
4:01 Maximum characters in a description
5:15 Exploring common meta tags
7:30 Meta tags are self closing
7:50 The meta Author and Keyword tags
9:06 Including external CSS & JavaScript files
11:15 Summary
► Get the code:
Repo: github.com/craigabourne/html-...
► Links used in the video:
Meta Tags that Google Understands: support.google.com/webmasters...
What’s in the head? Metadata in HTML: developer.mozilla.org/en-US/d...
W3Schools HTML Meta Tag: www.w3schools.com/tags/tag_me...
► The HTML for Absolute Beginners Playlist: • HTML for Absolute Begi...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

Learn HTML: ua-cam.com/play/PL4cTxE4s2XIYJL6uPQUwMt25M70gPl-O6.html

[@manendarpverma5252]

Word! Amazing video.

[@craigabourne]

Thank you!

[@marcusnoe]

Thanks Craig, good explanation

[@craigabourne]

Glad it was helpful!

[@LP_Storefront]

Thanks for the easy-to-understand walk through of creating meta tags. I was able to add meta description to my website to increase its presence in the search results.

[@janelleschuh3263]

Lots of really cool SEO tips in here actually

[@craigabourne]

A side-effect of talking about meta tags

[@simonbielik]

Some very good tips here! Thanks 👏

[@craigabourne]

You're welcome! Thanks for the feedback 👍

[@shilohdalby8447]

Very clean and useful, as always.

[@craigabourne]

Thanks! Appreciate the kind words

[@marinstrup]

Great video my friend. Thanks for the character limits 🔥

[@craigabourne]

No problem 👍

[@audenbickel]

Great video. Thank you!

[@craigabourne]

You're most welcome Auden 👍

[@mikeyboi5690]

These videos are so helpful thank you!

[@craigabourne]

Thank you! Appreciate it!

[@leonardreveira]

Thank you, this video helped me a lot!

[@craigabourne]

You're welcome! Thanks for the feedback 👍

[@lawrenceaprekuantwi9871]

🧡

[@kajabrooks]

Thanks :)

[@craigabourne]

No problem!

[@user-yz8ir3cl2y]

Thanks 😮😮

[@flashcsgo4559]

Thanks for your simple html playlist you made, you deserve much more subscribers!
I have a question. I downloaded emmet to notebook ++. When I write ! and hit TAB, I get the "skeleton" of the web page, but some of those meta tags are missing. Only charset UTF-8 is there. Those other are not there. Is that okay?
Thanks :-)

[@craigabourne]

That is totally fine. They are not 100% necessary. You can write them in manually if you want them. The only thing in the head that is completely necessary is the element

[@flashcsgo4559]

@@craigabourne Okay thank you 👍