revision:
It can include the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
It is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document and is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
The <title> tag is required in HTML documents and 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.
The <title> element also 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!
This element 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.
The <link> tag is most often used to link to external style sheets. Syntax: <link rel="stylesheet" href="">
This element 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.
This 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.
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Free Web tutorials">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
The <base> tag must have either an "href" or a "target" attribute present, or both. There can only be one single <base> element in a document!
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>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
It represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
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.
According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." A web page could normally be split into sections for introduction, content, and contact information.
It represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
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. Examples of where an <article> element can be used: forum post, blog post, newspaper article.
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.
It represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
A <header> element 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.
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.
A <footer> element typically contains: authorship information, copyright information, contact information, sitemap, back to top links, related documents. You can have several <footer> elements in one document.
It represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
Notice that 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.
Asides are frequently presented as sidebars or call-out boxes.
The <aside> content should be indirectly related to the surrounding content.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag 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.
code:
<figure class="examples">
<img src="../pics/4.jpg" alt="holidays" style="width:20%">
≪⃒figcaption>Fig.1 - Holiday rememberance</figcaption>
</figure>
The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
Save the document by pressing Ctrl + S
code:
<p class="examples">Save the document by pressing <kbd>Ctrl + S</kbd></p>
The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
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>
The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
Message from my computer:
x = 5;
y = 6;
z = x + y;
code:
<div>
<p class="examples">Message from my computer:</p>
<pre>
<code class="examples">
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</div>
x = 5;
y = 6;
z = x + y;
code:
<pre class="examples">
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
<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>