Buzz
Continue reading this Mytour article to understand the HTML head element. Additionally, you can explore other articles on Mytour to learn about HTML block elements.
HTML Head Element
1. HTML Head Element.
2. HTML Title Element.
3. HTML Style Element.
4. HTML Link Element.
5. HTML Meta Element.
6. Setting Viewport in HTML.
7. HTML Script Element.
8. HTML Base Element.
9. Omitting html, head, and body tags?.
10. Conclusion.
1. HTML Head Element
- The head element in HTML is where metadata is stored, positioned between the html and body tags.
- HTML metadata is information about the HTML document and is not displayed.
2. HTML Title Element
- The title element in HTML is used to specify the title of a document and is required in all HTML documents.
The title element in HTML:
- Defines a title in the browser tab.
- Provides a title for the page when the page is added to favorites.
- Displays the title for the page in the search results list.
Example:
The returned result after applying the title element looks like the following:
3. HTML Style Element
The style element in HTML is used to specify styles for the content on a single HTML page.
Example: below is an illustrative example of the style element in HTML:
The result obtained after applying the style element appears as follows:
4. HTML Link Element
The link element in HTML is used to connect with external style sheets.
Example: below is an example of the link element in HTML:
The returned outcome after applying the link element looks like the following:
5. HTML Meta Element
The meta element in HTML is used to specify the character set, describe the page, keywords, author, and other meta-data.
Meta-data is utilized on browsers (for content display), search engines (for keywords), and other web services.
Example: below is an example of the meta element in HTML:
The returned result after applying the meta tag in HTML appears as follows:
'Understanding the meta element in HTML.'
6. Setting Viewport in HTML
HTML introduces new methods for web designers to control the Viewport through the meta tag.
Viewport can be understood as the area displaying the website content on the user's device, adapting to the device screen size.
We can add the meta viewport element below on all web pages:
Where:
- The meta viewport element instructs the browser on how to control the size and scale of the page.
- The width=device-width part sets the width of the page to match the width of the device screen (adjusting for different devices).
- The initial-scale=1.0 part sets the initial zoom level when the browser loads the page for the first time.
Example: below is an example of a web page without the meta viewport tag (left) and a web page with the meta viewport tag (right):
7. HTML Script Element
The script element in HTML is used to specify client-side JavaScript.
Example: below is an example of the script element in HTML. In this example, JavaScript will write 'Mytour' into an HTML element with id='demo':
The returned result looks like the following:
8. HTML Base Element
The base element in HTML is used to specify the URL or default target for all relative URLs on a webpage.
Example: below is an example of the base element in HTML:
The returned result looks like the following:
9. Can HTML tags like html, head, and body be omitted?
In HTML5, we can omit tags like html, body, and head elements.
Example: the code snippet below is considered valid, where we skip the html, body, and head tags:
The returned result looks like the following:
10. Summary
Here is a list table of HTML head elements:
In this article, Mytour has just introduced you to HTML head elements, providing you with ample study material for better HTML understanding. Additionally, readers can explore more articles on Mytour to learn about HTML lists. In the next article, Mytour will continue to introduce you to HTML layout.
