HTML: Metadata in the Head
1h 26mIntermediate2020-06-11
Authors
Jen Kramer
Teaches web design and development
Course details
The HTML head element is different from the rest of the language, providing context rather than content. Want to control how your page appears on social media? Apply a title? Link a style? All that and more happen in the head. In this course, learn to leverage the invisible but powerful head element to improve search engine rankings, social media sharing, and more. Instructor Jen Kramer shows how to establish the fundamentals, like doctype and language, and use the meta tags to configure character sets, color themes, authors, and more, as well as redirect pages. Plus, learn how to control how links to your page are shown on Facebook with the Open Graph tag. Then discover how to set page titles, link and specify styles, and add JavaScript to your page with other crucial tags.
Topics include:
Establishing a document type
Setting character sets, color themes, and more with meta tags
Presenting your page to Facebook
Adding page titles
Linking styles
Connecting scripts
Topics include:
Establishing a document type
Setting character sets, color themes, and more with meta tags
Presenting your page to Facebook
Adding page titles
Linking styles
Connecting scripts
Skills covered
HTMLDigital PublishingWeb StandardsWeb DesignFront-End Web DevelopmentGraphic DesignWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Setting expectations for your document
- 02 - Working with Visual Studio Code
1. Before the Head of the Document
- 03 - Establishing language in your document
- 04 - Establishing a document type
2. Understanding Meta Tags
- 05 - How do meta tags work
- 06 - Setting character sets
- 07 - Redirecting pages with meta refresh
- 08 - Identifying authors and conversations
- 09 - Setting the viewport
- 10 - Setting color themes
- 11 - Presenting your page to Facebook
- 12 - Checking your work for Facebook
- 13 - Challenge - Configuring meta information
- 14 - Solution - Configuring meta information
3. Other Head Tags
- 15 - Adding a title to your page
- 16 - Creating identity for your pages with icons
- 17 - Linking styles to your page
- 18 - Specifying style directly
- 19 - Connecting scripts
- 20 - Establishing a base URL
- 21 - Challenge - Establishing scripts, styles, and icons
- 22 - Solution - Establishing scripts, styles, and icons
Conclusion
- 23 - Next steps