The <tbody> tag is used to group the body content in an HTML table. The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The "tbody" element must have one or more "tr" tags inside. The "tbody" tag must be used as a child of a "table" element, after any "caption","colgroup", and "thead" elements.
Tip: the "thead", "tbody", and "tfoot" elements will not affect the layout of the table by default. However, you can use CSS to style these elements!
Attributes: the <tbody> element supports the global attributes and events attributes.
The <td> tag defines a standard data cell in an HTML table. An HTML table has two kinds of cells: header cells, which contain header information (created with the "th" element), and data cells, which contain data (created with the "td" element). The text in "td" elements is regular and left-aligned by default. The text in "th" elements is bold and centered by default.
Attributes: the <td> element supports the global attributes and events attributes.Specific attributes are:
colspan ; value: number; specifies the number of columns a cell should span.
header ; value: header_id; specifies one or more header cells a cell is related to.
rowspan ; value: number; sets the number of rows a cell should span.
The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside "template" can be rendered later with JavaScript.
The "template" tag can be used if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the "template" tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
Think of a "template" as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the "template" element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
Attributes: the <template> element supports the global attributes and events attributes.
Syntax : <template> . . . </template>
some examples
example
Click the button below to display the hidden content from the template element.
Flower
Codes:
<div class="spec">
<p class="spec">Click the button below to display the hidden content from the template element.</p>
<button style="margin-left:4vw;" onclick="showContent()">Show hidden content</button>
<p id="mine"></p>
<template>
<h3>Flower</h3>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.getElementById("mine").appendChild(clon);
}
</script>
example
Click the button below to display the hidden content from the template element.
I like:
Codes:
<div class="spec">
<style>
.myClass {color: white; background-color: DodgerBlue; padding: 20px; text-align: center; margin: 10px;}
</style>
<p class="spec">Click the button below to display the hidden content from the template element.</p>
<button onclick="showContent_a()">Show hidden content</button>
<template>
<div class="myClass">I like: </div>
</template>
<p id="me"></p>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent_a() {
var temp, item, a, i;
temp = document.getElementsByTagName("template")[1];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.getElementById("me").appendChild(a);
}
}
</script>
"textarea" tag : defines multi-line text input control
The <textarea> tag defines a multi-line text input control. The element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the "cols" and "rows" attributes (or with CSS).
The "name" attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted). The "id" attribute is needed to associate the text area with a label. Always add the "label" tag for best accessibility practices!
Attributes: the <textarea> element supports the global attributes and events attributes.Specific attributes are:
autofocus ; value: autofocus; specifies that a text area should automatically get focus when the page loads.
cols ; value: number; specifies the visible width of a text area.
dirname ; value: textareaname.dir; specifies that the text direction of the textarea will be submitted.
disabled ; value: disabled; specifies that a text area should be disabled.
form ; value: form_id; specifies which form the text area belongs to.
maxlength ; value: number; specifies the maximum number of characters allowed in the text area.
name ; value: text; specifies a name for a text area.
placeholder ; value: text; specifies a short hint that describes the expected value of a text area.
readonly ; value: readonly; specifies that a text area should be read-only.
required ; value: required: specifies that a text area is required/must be filled out.
rows ; value: number; specifies the visible number of lines in a text area; .
wrap ; value: hard, soft; specifies how the text in a text area is to be wrapped when submitted in a form.
Syntax : <textarea> . . . </textarea>
some examples
example
Codes:
<form style="margin-left:4vw;" action = "/cgi-bin/hello_get.cgi" method = "get">
Fill the Detail: <br />
<textarea rows = "5" cols = "50" name = "description">
Enter your name
</textarea>
<input type = "submit" value = "submit" />
</form>
example
Codes:
<label style="margin-left: 4vw;" for="story">Tell us your story:</label>
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>
The <tfoot> tag is used to >group footer content in an HTML table. The <foot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tfoot> element must have one or more "tr" tags inside. It must be used as a child of a "table" element, after any "caption", "colgroup", "thead", and "tbody" elements. The "thead", "tbody", and "tfoot" elements will not affect the layout of the table by default. However, you can use CSS to style these elements!
Attributes: the <tfoot> element supports the global attributes and events attributes.
The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells: header cells, which contain header information (created with the <th> element), and data cells, which contain data (created with the <td> element). The text in "th" elements are bold and centered by default. The text in "td" elements are regular and left-aligned by default.
Attributes>: the <th> element supports the global attributes and events attributes.Specific attributes are:
abbr ; value: text; specifies an abbreviated version of the content in a header cell.
colspan ; value: number; specifies the number of columns a header cell should span.
headers ; value:header_id; specifies one or more header cells a cell is related to.
rowspan ; value: number; specifies the number of rows a header cell should span.
scope ; value: col, colgroup, row, rowgroup; specifies whether a header cell is a header for a column, row, or group of columns or rows.
The <thead> tag is used to group header content in an HTML table. It is used in conjunction with the "tbody> and "tfoot" elements to specify each part of a table (header, body, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The "thead" element must have one or more "tr" tags inside. The "thead" tag must be used in the following context: as a child of a "table" element, after any "caption" and "colgroup" elements, and before any "tbody", "tfoot", and "tr" elements. The "thead", "tbody", and "tfoot" elements will not affect the layout of the table by default. However, you can use CSS to style these elements!
Attributes: the <thead> element supports the global attributes and events attributes.
Market Share refers to the percentage of sites using any JavaScript library that use the specified library. Absolute Usage is the percent of websites surveyed, including those that use no JavaScript libraries, that use the specified library.
Codes:
<table>
<caption>The Three Most Popular JavaScript Libraries</caption>
<thead>
<tr>
<th>Library</th>
<th>jQuery</th>
<th>Bootstrap</th>
<th>Modernizr</th>
</tr>
</thead>
<tbody>
<tr>
<td>Market Share</td>
<td>96.1%</td>
<td>17.0%</td>
<td>14.3%</td>
</tr>
<tr>
<td>Absolute Usage</td>
<td>70.4%</td>
<td>12.4%</td>
<td>10.5%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><em>Market Share</em> refers to the percentage of sites
using any JavaScript library that use the specified library. <em>Absolute
Usage</em> is the percent of websites surveyed, including those that use
no JavaScript libraries, that use the specified library. </td>
</tr>
</tfoot>
</table>
The <time> tag defines a specific time (or datetime). The "datetime" attribute of this element is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
The <time> element isn't particularly useful until paired with a "datetime" attribute. Once a "datetime" attribute has been associated with the <time> element, the browser knows a lot more about the time described in the time element and can use that information when interacting with other applications — such as when importing information from an HTML email or webpage into a calendar application.
Attributes: the <time> element includes the global attributes. The tag also supports the following additional attribute:
datetime ; value: datetime; represent a machine-readable format of the <time> element. This attribute indicates the time and/or date of the element and must be in one of the vaild datetime formats:
a valid year string (2011), a valid month string (2011-11), a valid date string (2011-11-18), a valid yearless date string (11-18), a valid week string (2011-W47), a valid time string (14:54, 14:54:39, 14:54:39.929), a valid local date and time string (2011-11-18T14:54:39.929, 2011-11-18 14:54:39.929), a valid global date and time string (2011-11-18T14:54:39.929Z, 2011-11-18T14:54:39.929-0400, 2011-11-18T14:54:39.929-04:00, 2011-11-18 14:54:39.929Z, 2011-11-18 14:54:39.929-0400, 2011-11-18 14:54:39.929-04:00), a valid duration string (PT4H18M3S).
Syntax: <time datetime=" " > . . . . </time>
some examples
example
Open from to every weekday.
I have a date on .
code:
<p class="example">Open from to every weekday.</p>
<p class="example">I have a date on .</p>
example
The concert starts at .
code:
<p class="example">The concert starts at .</p>
example
Our shop opens at .
We should plan to go to the movie on .
I give surprise on .
code:
<p class="example">Our shop opens at <time>09:00</time>.</p>
<p class="example">We should plan to go to the movie on <time datetime="2021-01-13">
this Saturday</time>.</p>
<p class="example">I give surprise on <time datetime="2021-02-14T20:00">Valentine's
day</time>.</p>
The <title> tag defines the title of the document. 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! The contents 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 defines a title in the browser toolbar, provides a title for the page when it is added to favorites, and displays a title for the page in search-engine results. When creating titles: go for a longer, descriptive title (avoid one- or two-word titles); search engines will display about 50-60 characters of the title, so try not to have titles longer than that; do not use just a list of words as the title (this may reduce the page's position in search results). So, try to make the title as accurate and meaningful as possible!
Note: You can NOT have more than one "title" element in an HTML document.
Attributes: the <title> element supports the global attributes.
Syntax : <title> . . . </title>
some examples
example
Codes:
<head>
<title>HTML Elements Reference</title>
</head>
Codes:
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
The <tr> tag defines a row in an HTML table. The <tr> element contains one or more <th> or <td> elements. All the rows in a table contain an equal number of cells, which is equivalent to the number of cells in the longest row. If there are fewer cells in a row, then the browser will automatically fill the row, placing empty cells at the end of it. If you need to emphasize that there is no data in other cells, then create cells without content where necessary.
Attributes: the <tr> element supports the global attributes and events attributes.
The <track> tag specifies text tracks for <audio> or <video> elements. This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.Tracks are formatted in WebVTT format (.vtt files).
Attributes: the <track> element supports the global attributes and events attributes.Specific attrbutes are:
default ; value: default; specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.
kind ; value: captions, chapters, descriptions, metadata, subtitles; specifies the kind of text track.
label ; value: text; specifies the title of the text track.
src ; value: URL; required. Specifies the URL of the track file.
srclang ; value: language_code; specifies the language of the track text data (required if kind="subtitles").
