11.32.1. New elements of HTML5

HTML 4.01 has changed a lot since 1999. Today, several elements in HTML 4.01 have been discarded and these elements have been deleted or redefined in HTML5.

In order to better handle today’s Internet applications, HTML5 has added many new elements and functions, such as: graphics rendering, multimedia content, better page structure, better form processing, and several `` api``drag and drop elements, positioning, including web application caching, storage, web workers, etc.

11.32.2. < canvas > New element

Label

Description

< canvas >

tags define graphics, such as charts and other images. The label is based on JavaScript’s drawing API

11.32.3. New multimedia elements

Label

Description

< audio >

Define audio content

< video >

Define video

Define multimedia resources < video > and < audio >

< embed >

Define embedded content, such as plug-ins.

< track >

Specify external text tracks for media such as < video > and < audio > elements.

11.32.4. New form element

Label

Description

< datalist >

Define a list of options. Use this element with the input element to define possible values for input.

< keygen >

Specifies the key pair generator field to use for the form.

< output >

Define different types of output, such as script output.

11.32.5. New semantic and structural elements

HTML5 provides new elements to create a better page structure:

11.32.6. Removed element

The following HTML 4.01elements have been deleted in HTML5:

  • <li><p><code class="docutils literal notranslate"> <span class=pre> <strike> <li><p><code class="docutils literal notranslate"> <span class=pre> <tt> <div class=panel-footer><div class=row><div class=col-sm-12 style=text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden>文章链接 ： <a title="11.32. New elements of HTML5 " class=text-primary href=/tutorial/k5098/>11.32. New elements of HTML5 </a></div></div></div> <div class=col-sm-3><div class="catalog_div col-sm-12"><div class="card mb-4 shadow-sm"><div class=card-header><a class="d-flex align-items-center text-decoration-none"> <h3>Principles and Applications of WebGIS</h3>  <span class="badge bg-primary rounded-pill">37</span> </a><p><small class=text-muted><article class=bd-article><section id=webgis></section></article></small></div><ul class="list-group list-group-flush"><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k601/> 1. Geographical Information Systems in the World Wide Web Era <span class="badge bg-primary rounded-pill">4</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k602/> 2. Basic technology of WebGIS <span class="badge bg-primary rounded-pill">4</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k603/> 3. Geographic Web Services <span class="badge bg-primary rounded-pill">5</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k604/> 4. aggregation of geographical information <span class="badge bg-primary rounded-pill">4</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k605/> 5. mobile GIS <span class="badge bg-primary rounded-pill">5</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k606/> 6. Geographic information portal <span class="badge bg-primary rounded-pill">3</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k607/> 7. New generation national spatial data infrastructure and GIS <span class="badge bg-primary rounded-pill">4</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k608/> 8. Application of WebGIS in E-Commerce <span class="badge bg-primary rounded-pill">3</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k609/> 9. Application of WebGIS in E-government <span class="badge bg-primary rounded-pill">3</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k610/> 10. Hotspots and frontiers of WebGIS <span class="badge bg-primary rounded-pill">2</span> </a></ul></div></div><div class="catalog_div col-sm-12"><div class="card mb-4 shadow-sm"><div class=card-header><a class="d-flex align-items-center text-decoration-none"> <h3>Web框架</h3>  <span class="badge bg-primary rounded-pill">942</span> </a><p><small class=text-muted><div class=body role=main><section id=web></section></div></small></div><ul class="list-group list-group-flush"><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kb01/> 1. Angularjs2 <span class="badge bg-primary rounded-pill">8</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka01/> 1. SVG tutorial <span class="badge bg-primary rounded-pill">19</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc01/> 1. Memcached <span class="badge bg-primary rounded-pill">20</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh01/> 1. C# tutorial <span class="badge bg-primary rounded-pill">61</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kd01/> 1. Sqlite <span class="badge bg-primary rounded-pill">47</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh02/> 2. Go <span class="badge bg-primary rounded-pill">43</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kd02/> 2. Docker <span class="badge bg-primary rounded-pill">59</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kb02/> 2. Vue3 <span class="badge bg-primary rounded-pill">19</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka02/> 2. Servlet <span class="badge bg-primary rounded-pill">21</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kb03/> 3. React <span class="badge bg-primary rounded-pill">23</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka03/> 3. SOAP tutorial <span class="badge bg-primary rounded-pill">10</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc03/> 3. Android <span class="badge bg-primary rounded-pill">18</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kd03/> 3. Mongodb <span class="badge bg-primary rounded-pill">44</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh03/> 3. Kotlin <span class="badge bg-primary rounded-pill">18</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh04/> 4. Lua <span class="badge bg-primary rounded-pill">31</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kd04/> 4. MySQL tutorial <span class="badge bg-primary rounded-pill">34</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc04/> 4. Appml <span class="badge bg-primary rounded-pill">12</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh05/> 5. Perl <span class="badge bg-primary rounded-pill">45</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kd05/> 5. Postgresql <span class="badge bg-primary rounded-pill">41</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka05/> web <span class="badge bg-primary rounded-pill">15</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka06/> 5. Web Services tutorial <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh06/> 6. Ruby <span class="badge bg-primary rounded-pill">41</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc06/> 6. Design-pattern <span class="badge bg-primary rounded-pill">35</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc07/> 7. Django <span class="badge bg-primary rounded-pill">18</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh07/> 7. Rust <span class="badge bg-primary rounded-pill">22</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka07/> 6. WSDL tutorial <span class="badge bg-primary rounded-pill">8</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc08/> 8. Foundation <span class="badge bg-primary rounded-pill">39</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc09/> 9. Ios <span class="badge bg-primary rounded-pill">43</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka09/> 8. Css3 <span class="badge bg-primary rounded-pill">26</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh09/> 9. Swift <span class="badge bg-primary rounded-pill">43</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka12/> 11. HTML tutorial-(HTML5 Standard) <span class="badge bg-primary rounded-pill">54</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka13/> 12. Http <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc13/> 13. Regex <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc14/> 14. Regexp <span class="badge bg-primary rounded-pill">7</span> </a></ul></div></div><div class="catalog_div col-sm-12"><div class="card mb-4 shadow-sm"><div class=card-header><a class="d-flex align-items-center text-decoration-none"> <h3>WEB基础</h3>  <span class="badge bg-primary rounded-pill">287</span> </a><p><small class=text-muted><div class=body role=main><section id=web></section></div></small></div><ul class="list-group list-group-flush"><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc02/> 2. ADO tutorial <span class="badge bg-primary rounded-pill">23</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka04/> 4. W3C tutorial <span class="badge bg-primary rounded-pill">16</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc05/> 5. Data-structures <span class="badge bg-primary rounded-pill">31</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kh08/> 8. Scala <span class="badge bg-primary rounded-pill">41</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka08/> 7. Bootstrap5 <span class="badge bg-primary rounded-pill">37</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc10/> 10. Markdown <span class="badge bg-primary rounded-pill">10</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka10/> 9. Echarts <span class="badge bg-primary rounded-pill">12</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc11/> 11. Maven <span class="badge bg-primary rounded-pill">20</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka11/> 10. Font-awesome <span class="badge bg-primary rounded-pill">16</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc12/> 12. RDF tutorial <span class="badge bg-primary rounded-pill">11</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/ka14/> 13. Sass <span class="badge bg-primary rounded-pill">14</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/kc15/> 15. XML Schema tutorial <span class="badge bg-primary rounded-pill">56</span> </a></ul></div></div><div class="catalog_div col-sm-12"><div class="card mb-4 shadow-sm"><div class=card-header><a class="d-flex align-items-center text-decoration-none"> <h3>Principles, Technologies, and Methods of Geographic Information Systems</h3>  <span class="badge bg-primary rounded-pill">102</span> </a><p><small class=text-muted><article class=bd-article><section id=id1><p>In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.</section></article></small></div><ul class="list-group list-group-flush"><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k101/> 1. Introduction to Geographic Information Systems <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k102/> 2. From the Real World to the Bit World <span class="badge bg-primary rounded-pill">3</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k103/> 3. Spatial Data Model <span class="badge bg-primary rounded-pill">7</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k104/> 4. Spatial Reference Systems and Map Projections <span class="badge bg-primary rounded-pill">5</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k105/> 5. Data in GIS <span class="badge bg-primary rounded-pill">4</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k106/> 6. Spatial data acquisition <span class="badge bg-primary rounded-pill">2</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k107/> 7. Spatial Data Management <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k108/> 8. Spatial analysis <span class="badge bg-primary rounded-pill">8</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k109/> 9. Digital Terrain Model (DTM) and Terrain Analysis <span class="badge bg-primary rounded-pill">5</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k110/> 10. Spatial modeling and spatial decision support <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k111/> 11. Spatial data representation and map making <span class="badge bg-primary rounded-pill">6</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k112/> 12. 3S Integration Technology <span class="badge bg-primary rounded-pill">5</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k113/> 13. Network Geographic Information System <span class="badge bg-primary rounded-pill">4</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k114/> 14. Examples of Geographic Information System Application <span class="badge bg-primary rounded-pill">8</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k115/> 15. Organization and Management of Geographic Information System Application Projects <span class="badge bg-primary rounded-pill">10</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k116/> 16. Geographic Information system Software Engineering Technology <span class="badge bg-primary rounded-pill">7</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k117/> 17. Geographic Information System Standards <span class="badge bg-primary rounded-pill">3</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k118/> 18. Geographic Information System and Society <span class="badge bg-primary rounded-pill">3</span> </a><li class="list-group-item d-flex justify-content-between align-items-center"><a class=text-decoration-none href=/catalog/k119/> 19. Earth Information Science and Digital Earth <span class="badge bg-primary rounded-pill">4</span> </a></ul></div></div></div> <footer id=copyrights><div class=container><p>Powered by Django & PostgreSQL (with PostGIS)</div></footer>

Label

Description

< article >

Define the independent content area of the page.

< aside >

Define the contents of the sidebar of the page.

< bdi >

Allows you to set a piece of text away from the text orientation setting of its parent element.

< command >

Define command buttons, such as radio buttons, check boxes, or buttons

< details >

Used to describe the details of a document or a part of a document

< dialog >

Define a dialog box, such as a prompt box

< summary >

The tag contains the title of the details element

Specify independent streaming content (images, charts, photos, codes, etc.).

< figcaption >

Define the title of the < figure > element

< footer >

Define the footer for section or document.

< header >

Defines the header area of the document

< mark >

Defines marked text.

< meter >

Define weights and measures. Used only for measurements of known maximum and minimum values.

< nav >

Define the part of the navigation link.

< progress >

Define the progress of any type of task.

< ruby >

Define ruby comments (Chinese phonetic or character).

< rt >

Define the interpretation or pronunciation of characters (Chinese Bopomofo or characters).

Used in ruby comments to define what is displayed by browsers that do not support ruby elements.

< section >

Define sections in the document.

< time >

Define the date or time.

< wbr >

Specifies where to add newline characters in the text.