It is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document and is not displayed. Metadata define the document title, character set, styles, scripts, and other meta information.
It can include the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
<title>: defines the title of the document.
- must be text-only, and it is shown in the browser's title bar or in the page's tab. - is required in HTML documents; the content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results. - defines a title in the browser toolbar, provides a title for the page when it is added to favorites, displays a title for the page in search engine-results. So, try to make the title as accurate and meaningful as possible!
<style>: used to define style information for a single HTML page.
- contains style information for a document, or part of a document. - it contains CSS, which is applied to the contents of the document containing this element.
<link>: defines the relationship between the current document and an external resource.
- is most often used to link to external style sheets. Syntax: <link rel="stylesheet" href=" ">. -is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
<meta>: typically used to specify meta data
- includes the character set, page description, keywords, author of the document, and viewport settings. - the metadata will not be displayed on the page, but are used by browsers (how to display content or reload page), by search engines (keywords), and other web services.
Setting the viewport：the viewport is the user's visible area of a web page.
It varies with the device - it will be smaller on a mobile phone than on a computer screen. The following <meta> element should be included in all web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This gives the browser instructions on how to control the page's dimensions and scaling.
The "width=device-width" part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The "initial-scale=1.0" part sets the initial zoom level when the page is first loaded by the browser.
<script>: used to define client-side JavaScripts.
<base> element : specifies the base URL and/or target for all relative URLs in a page.
- must have either an "href" or a "target" attribute present, or both. There can only be one single <base> element in a document!
A semantic element clearly describes its meaning to both the browser and the developer.
Non-semantic elements (e.g.: <div> and <span>) tell nothing about its content. Semantic elements (e.g. <form>, <table>, <article> ) clearly define their content.
Some semantic elements in HTML can be used to define different parts of a web page: <article>, <aside>, <div>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
<main>: defines the main content of the webpage
It represents the dominant content of the body of a document and consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
<section>: defines a section in a document.
It represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
It represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
Nesting <article> in <section> or vice versa? : the <article> element specifies independent, self-contained content. The <section> element defines section in a document. Can we use the definitions to decide how to nest those elements? No, we cannot! So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
<header>: represents a container for introductory content or a set of navigational links.
- it represents introductory content, typically a group of introductory or navigational aids.
- it typically contains: one or more heading elements (<h1> - <h6>), logo or icon, authorship information.
Note: you can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
<footer>: defines a footer for a document or section.
- it represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents. - you can have several <footer> elements in one document.
<nav>: defines a set of navigation links.
- it represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. - NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
<aside>: defines some content aside from the content it is placed in (like a sidebar).
- asides are frequently presented as sidebars or call-out boxes. - the content should be indirectly related to the surrounding content.
<figure> and <figcaption> elements
<figure>: specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption>: defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
- is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
example
Save the document by pressing Ctrl + S
code:
<p class="examples">Save the document by pressing <kbd>Ctrl + S</kbd></p>
<samp>: for program output:
- is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
example
Message from my computer:
File not found. Press F1 to continue
code:
<p class="examples">Message from my computer:</p>
<p class="examples"><samp>File not found.<br>Press F1 to continue</samp></p>
<code> : for computer code:
- is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
example
Message from my computer:
x = 5;
y = 6;
z = x + y;
code:
<div>
<p class="examples">Message from my computer:</p>
<pre style="border:none">
<code class="examples">
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</div>
x = 5;
y = 6;
z = x + y;
code:
<pre class="examples" style="border:none">
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
<var> : for variables:
- is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
example
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
code:
<div>
<p class="examples">The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>,
where <var>b<var> is the base, and <var>h</var> is the vertical height.</p>
</div>
