HTML5 - Best Practice

MetroUI-Apps-HTML-5 iconHTML5

Target Audience: CAST Administrators

Summary: This document provides a guide based on CAST’s field experience on how to configure Spring based applications using CAST AIP. These configurations are used over and above CAST AIP 8.2.x HTML5 offering (see Reference Materials below for links) to overcome limitations such as missing links. The applicability of this guide should have assessed for newer versions of CAST AIP and Extension.

Introduction to HTML5

This section gives a brief overview of the framework.

HTML5 is the fifth major standard of HTML. Development of the standard began in 2007 and HTML5 websites started becoming mainstream in 2010. The final HTML5 standard was officially standardized by W3C on October 28, 2014.

The previous HTML standard, HTML 4.01, was standardized in 1999 – fifteen years before the HTML5 standard was published. However, in the decade preceding HTML5, most websites were written in XHTML, a more strict version of HTML published in 2000. HTML5 was designed to supersede both HTML 4 and XHTML by providing web developers with a simpler standard that includes several new features for the modern web.

The table below includes a list of new elements, or tags, introduced in HTML5 that are used to define the structure of a document.

HTML Tags

TagDescription
Defines the document type
Defines an HTML document
</a></td> <td>Defines a title for the document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_body.asp"><body></a></td> <td>Defines the document’s body</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_hn.asp"><h1> to <h6></a></td> <td>Defines HTML headings</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_p.asp"><p></a></td> <td>Defines a paragraph</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_br.asp"><br></a></td> <td>Inserts a single line break</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_hr.asp"><hr></a></td> <td>Defines a thematic change in the content</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_comment.asp"><!-…-></a></td> <td>Defines a comment</td> </tr> </tbody> </table> <h3 id="formatting">Formatting</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_acronym.asp"><acronym></a></td> <td>Not supported in HTML5. Use <abbr> instead. Defines an acronym</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_abbr.asp"><abbr></a></td> <td>Defines an abbreviation or an acronym</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_address.asp"><address></a></td> <td>Defines contact information for the author/owner of a document/article</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_b.asp"><b></a></td> <td>Defines bold text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_bdi.asp"><bdi></a></td> <td>Isolates a part of text that might be formatted in a different direction from other text outside it</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_bdo.asp"><bdo></a></td> <td>Overrides the current text direction</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_big.asp"><big></a></td> <td>Not supported in HTML5. Use CSS instead. Defines big text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_blockquote.asp"><blockquote></a></td> <td>Defines a section that is quoted from another source</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_center.asp"><center></a></td> <td>Not supported in HTML5. Use CSS instead. Defines centered text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_cite.asp"><cite></a></td> <td>Defines the title of a work</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_code.asp"><code></a></td> <td>Defines a piece of computer code</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_del.asp"><del></a></td> <td>Defines text that has been deleted from a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_dfn.asp"><dfn></a></td> <td>Represents the defining instance of a term</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_em.asp"><em></a></td> <td>Defines emphasized text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_font.asp"><font></a></td> <td>Not supported in HTML5. Use CSS instead. Defines font, color, and size for text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_i.asp"><i></a></td> <td>Defines a part of text in an alternate voice or mood</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_ins.asp"><ins></a></td> <td>Defines a text that has been inserted into a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_kbd.asp"><kbd></a></td> <td>Defines keyboard input</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_mark.asp"><mark></a></td> <td>Defines marked/highlighted text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_meter.asp"><meter></a></td> <td>Defines a scalar measurement within a known range (a gauge)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_pre.asp"><pre></a></td> <td>Defines preformatted text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_progress.asp"><progress></a></td> <td>Represents the progress of a task</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_q.asp"><q></a></td> <td>Defines a short quotation</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_rp.asp"><rp></a></td> <td>Defines what to show in browsers that do not support ruby annotations</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_rt.asp"><rt></a></td> <td>Defines an explanation/pronunciation of characters (for East Asian typography)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_ruby.asp"><ruby></a></td> <td>Defines a ruby annotation (for East Asian typography)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_s.asp"><s></a></td> <td>Defines text that is no longer correct</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_samp.asp"><samp></a></td> <td>Defines sample output from a computer program</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_small.asp"><small></a></td> <td>Defines smaller text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_strike.asp"><strike></a></td> <td>Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_strong.asp"><strong></a></td> <td>Defines important text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_sub.asp"><sub></a></td> <td>Defines subscripted text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_sup.asp"><sup></a></td> <td>Defines superscripted text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_time.asp"><time></a></td> <td>Defines a date/time</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_tt.asp"><tt></a></td> <td>Not supported in HTML5. Use CSS instead. Defines teletype text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_u.asp"><u></a></td> <td>Defines text that should be stylistically different from normal text</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_var.asp"><var></a></td> <td>Defines a variable</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_wbr.asp"><wbr></a></td> <td>Defines a possible line-break</td> </tr> </tbody> </table> <h3 id="forms-and-input">Forms and Input</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_form.asp"><form></a></td> <td>Defines an HTML form for user input</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_input.asp"><input></a></td> <td>Defines an input control</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_textarea.asp"><textarea></a></td> <td>Defines a multiline input control (text area)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_button.asp"><button></a></td> <td>Defines a clickable button</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_select.asp"><select></a></td> <td>Defines a drop-down list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_optgroup.asp"><optgroup></a></td> <td>Defines a group of related options in a drop-down list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_option.asp"><option></a></td> <td>Defines an option in a drop-down list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_label.asp"><label></a></td> <td>Defines a label for an <input> element</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_fieldset.asp"><fieldset></a></td> <td>Groups related elements in a form</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_legend.asp"><legend></a></td> <td>Defines a caption for a <fieldset> element</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_datalist.asp"><datalist></a></td> <td>Specifies a list of pre-defined options for input controls</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_keygen.asp"><keygen></a></td> <td>Defines a key-pair generator field (for forms)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_output.asp"><output></a></td> <td>Defines the result of a calculation</td> </tr> </tbody> </table> <h3 id="frames">Frames</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_frame.asp"><frame></a></td> <td>Not supported in HTML5. Defines a window (a frame) in a frameset</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_frameset.asp"><frameset></a></td> <td>Not supported in HTML5. Defines a set of frames</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_noframes.asp"><noframes></a></td> <td>Not supported in HTML5. Defines an alternate content for users that do not support frames</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_iframe.asp"><iframe></a></td> <td>Defines an inline frame</td> </tr> </tbody> </table> <h3 id="images">Images</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_img.asp"><img></a></td> <td>Defines an image</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_map.asp"><map></a></td> <td>Defines a client-side image-map</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_area.asp"><area></a></td> <td>Defines an area inside an image-map</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_canvas.asp"><canvas></a></td> <td>Used to draw graphics, on the fly, via scripting (usually JavaScript)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_figcaption.asp"><figcaption></a></td> <td>Defines a caption for a <figure> element</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_figure.asp"><figure></a></td> <td>Specifies self-contained content</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_picture.asp"><picture></a></td> <td>Defines a container for multiple image resources</td> </tr> </tbody> </table> <h3 id="audio--video">Audio / Video</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_audio.asp"><audio></a></td> <td>Defines sound content</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_source.asp"><source></a></td> <td>Defines multiple media resources for media elements (<video>, <audio> and <picture>)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_track.asp"><track></a></td> <td>Defines text tracks for media elements (<video> and <audio>)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_video.asp"><video></a></td> <td>Defines a video or movie</td> </tr> </tbody> </table> <h3 id="links">Links</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_a.asp"><a></a></td> <td>Defines a hyperlink</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_link.asp"><link></a></td> <td>Defines the relationship between a document and an external resource (most used to link to style sheets)</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_nav.asp"><nav></a></td> <td>Defines navigation links</td> </tr> </tbody> </table> <h3 id="lists">Lists</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_ul.asp"><ul></a></td> <td>Defines an unordered list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_ol.asp"><ol></a></td> <td>Defines an ordered list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_li.asp"><li></a></td> <td>Defines a list item</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_dir.asp"><dir></a></td> <td>Not supported in HTML5. Use <ul> instead. Defines a directory list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_dl.asp"><dl></a></td> <td>Defines a description list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_dt.asp"><dt></a></td> <td>Defines a term/name in a description list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_dd.asp"><dd></a></td> <td>Defines a description of a term/name in a description list</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_menu.asp"><menu></a></td> <td>Defines a list/menu of commands</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_menuitem.asp"><menuitem></a></td> <td>Defines a command/menu item that the user can invoke from a popup menu</td> </tr> </tbody> </table> <p> </p> <h3 id="tables">Tables</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_table.asp"><table></a></td> <td>Defines a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_caption.asp"><caption></a></td> <td>Defines a table caption</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_th.asp"><th></a></td> <td>Defines a header cell in a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_tr.asp"><tr></a></td> <td>Defines a row in a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_td.asp"><td></a></td> <td>Defines a cell in a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_thead.asp"><thead></a></td> <td>Groups the header content in a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_tbody.asp"><tbody></a></td> <td>Groups the body content in a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_tfoot.asp"><tfoot></a></td> <td>Groups the footer content in a table</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_col.asp"><col></a></td> <td>Specifies column properties for each column within a <colgroup> element</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_colgroup.asp"><colgroup></a></td> <td>Specifies a group of one or more columns in a table for formatting</td> </tr> </tbody> </table> <h3 id="styles-and-semantics">Styles and Semantics</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_style.asp"><style></a></td> <td>Defines style information for a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_div.asp"><div></a></td> <td>Defines a section in a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_span.asp"><span></a></td> <td>Defines a section in a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_header.asp"><header></a></td> <td>Defines a header for a document or section</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_footer.asp"><footer></a></td> <td>Defines a footer for a document or section</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_main.asp"><main></a></td> <td>Specifies the main content of a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_section.asp"><section></a></td> <td>Defines a section in a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_article.asp"><article></a></td> <td>Defines an article</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_aside.asp"><aside></a></td> <td>Defines content aside from the page content</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_details.asp"><details></a></td> <td>Defines additional details that the user can view or hide</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_dialog.asp"><dialog></a></td> <td>Defines a dialog box or window</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_summary.asp"><summary></a></td> <td>Defines a visible heading for a <details> element</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_data.asp"><data></a></td> <td>Links the given content with a machine-readable translation</td> </tr> </tbody> </table> <h3 id="meta-info">Meta Info</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_head.asp"><head></a></td> <td>Defines information about the document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_meta.asp"><meta></a></td> <td>Defines metadata about an HTML document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_base.asp"><base></a></td> <td>Specifies the base URL/target for all relative URLs in a document</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_basefont.asp"><basefont></a></td> <td>Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document</td> </tr> </tbody> </table> <h3 id="programming">Programming</h3> <table> <thead> <tr> <th><strong>Tag</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3schools.com/tags/tag_script.asp"><script></a></td> <td>Defines a client-side script</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_noscript.asp"><noscript></a></td> <td>Defines an alternate content for users that do not support client-side scripts</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_applet.asp"><applet></a></td> <td>Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_embed.asp"><embed></a></td> <td>Defines a container for an external (non-HTML) application</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_object.asp"><object></a></td> <td>Defines an embedded object</td> </tr> <tr> <td><a href="https://www.w3schools.com/tags/tag_param.asp"><param></a></td> <td>Defines a parameter for an object</td> </tr> </tbody> </table> <h2 id="versions-of-html5-framework-supported-by-cast">Versions of HTML5 Framework supported by CAST</h2> <p>This section highlights the HTML5 versions supported by CAST AIP 8.2.x</p> <p>HTML5 and JavaScript         : <a href="http://doc.castsoftware.com/display/DOCEXT/HTML5+and+JavaScript">http://doc.castsoftware.com/display/DOCEXT/HTML5+and+JavaScript</a></p> <p>HTML5 and JavaScript - 1.8 : <a href="http://doc.castsoftware.com/display/DOCEXT/HTML5+and+JavaScript+-+1.8">http://doc.castsoftware.com/display/DOCEXT/HTML5+and+JavaScript+-+1.8</a></p> <table> <thead> <tr> <th><strong>Technology (version)</strong></th> <th><strong>Supported</strong></th> </tr> </thead> <tbody> <tr> <td>HTML (1 to 5)</td> <td>✅</td> </tr> <tr> <td>JavaScript (1 to 1.8.1)</td> <td>✅</td> </tr> <tr> <td>JavaScript ECMA 6</td> <td>❌</td> </tr> <tr> <td>CSS (1 to 3)</td> <td>✅</td> </tr> </tbody> </table> <p><strong>Function Point, Quality and Sizing support</strong><br> This extension provides the following support:</p> <ul> <li><strong>Function Points (transactions)</strong>: a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported</li> <li><strong>Quality and Sizing</strong>: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist <table> <thead> <tr> <th><strong>Function Points(transactions)</strong></th> <th><strong>Quality and Sizing</strong></th> </tr> </thead> <tbody> <tr> <td>✅</td> <td>✅</td> </tr> </tbody> </table> </li> </ul> <h2 id="file-types-expected-for-cast-analysis">File Types expected for CAST Analysis</h2> <p>This section highlights all the file types that can be expected to be delivered if the application has implemented this framework.</p> <ul> <li>html</li> <li>js</li> </ul> <h2 id="html5">HTML5</h2> <p>This section gives a brief overview of HTML5.</p> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759109.png" alt=""></p> <h3 id="how-to-identify-the-implementation-of-html5">How to identify the implementation of HTML5:</h3> <p>This section details the approach for identifying the presence in java</p> <p>In your html file you would be able to find this tag: <strong><meta charset="UTF-8"></strong></p> <h3 id="html5-description">HTML5 Description:</h3> <p>This section gives a brief overview of HTML5.</p> <p><strong>HTML5</strong> is the latest evolution of the standard that defines <a href="https://developer.mozilla.org/en-US/docs/HTML">HTML</a>. The term represents two different concepts:</p> <ul> <li>It is a new version of the language HTML, with new elements, attributes, and behaviors,</li> <li>and a larger set of <strong>technologies</strong> that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.</li> </ul> <p>Designed to be usable by all Open Web developers,the tags classified into several groups based on their function.</p> <table> <thead> <tr> <th><strong>Sample Tags</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td><header></td> <td>Defines the webpage header</td> </tr> <tr> <td><footer></td> <td>Defines the page footer</td> </tr> <tr> <td><nav></td> <td>Defines the navigation bar</td> </tr> <tr> <td><main></td> <td>Defines the main content of a webpage</td> </tr> <tr> <td><article></td> <td>Defines an article within a page</td> </tr> <tr> <td><section></td> <td>Defines a section of a document or article</td> </tr> <tr> <td><aside></td> <td>Defines content outside a page’s primary content</td> </tr> </tbody> </table> <h3 id="how-to-configure-html5-in-cast-aip">How to configure HTML5 in CAST AIP:</h3> <p>This section describes all the CAST configuration steps to be followed in order to configure HTML5 based application.</p> <p>The following objects are displayed in CAST Enlighten:</p> <table> <thead> <tr> <th><strong>Icon</strong></th> <th><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td></td> <td>JavaScript file</td> </tr> <tr> <td></td> <td>HTML5 Source Code</td> </tr> <tr> <td></td> <td>HTML5 CSS Source Code</td> </tr> <tr> <td></td> <td>HTML5 CSS Source Code Fragment</td> </tr> <tr> <td></td> <td>HTML5 JavaScript Function</td> </tr> <tr> <td></td> <td>HTML5 JavaScript Source Code</td> </tr> <tr> <td></td> <td>HTML5 JavaScript Source Code Fragment</td> </tr> <tr> <td></td> <td>HTML5 Web Socket Service</td> </tr> <tr> <td></td> <td>HTML5 Get XMLHttpRequest Service</td> </tr> <tr> <td></td> <td>HTML5 Update XMLHttpRequest Service</td> </tr> <tr> <td></td> <td>HTML5 Post XMLHttpRequest Service</td> </tr> <tr> <td></td> <td>HTML5 Delete XMLHttpRequest Service</td> </tr> </tbody> </table> <h4 id="server-manager-configuration">Server Manager Configuration</h4> <p>This section describes the Server Manager Configuration Steps.</p> <p>Install below listed Extension & Manage it using Server Manager on your schema.</p> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759108.jpg" alt=""></p> <p><strong>Downloading a new version of an extension</strong><br> The following section describes how to download a new version of an existing extension. For this example, we have already been using a version of the AngularJS extension and we want to install a new version to take advantage of bug fixes and new Quality Rules. To do so:</p> <ul> <li> <ul> <li>As shown in the image below, select:</li> </ul> <ol> <li>the <strong>Updates</strong> option (this option displays all extensions that are available on the remote server that are <strong>a more recent version</strong> of an extension that has already been downloaded to the local machine)</li> <li>the <strong>Latest versions only</strong> option (CAST recommends this option to filter out <strong>previous releases of extensions</strong>)</li> <li>the <strong>Long term support only</strong> option (CAST recommends this option to filter out <strong>pre-release or BETA releases</strong>)</li> </ol> </li> </ul> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759136.png" alt=""></p> <ul> <li> <ul> <li>In the image above there is one extension available. This is a more recent version of the AngularJS extension that we have been using already with CAST AIP.</li> <li>Select the required extension and click the <strong>Upgrade</strong> button:</li> </ul> </li> </ul> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759137.png" alt=""></p> <ul> <li> <ul> <li>The new version of the extension will now download to the local machine. In the following image we can see that the newer version of the AngularJS extension (1.8.0) has been placed on disk in <strong>%PROGRAMDATA%\CAST\CAST\Extensions</strong> (CAST AIP 8.x.x) or in**<CAST_installation_folder>\CustomPlugins** (CAST AIP 7.3.x) along side the existing version:</li> </ul> </li> </ul> <h4 id="pre-analysis-configuration">Pre Analysis Configuration</h4> <p>This Section describes the CMS Configuration which is required to set HTML5</p> <p>Using the CAST Management Studio</p> <ul> <li>Accept and deploy the <strong>Version</strong> in the CAST Management Studio. No <strong>Analysis Units</strong> will be created automatically relating to the HTML5/JavaScript source code - this is the expected behavior. However, if your HTML5/JavaScript related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:</li> </ul> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759142.png" alt=""></p> <h4 id="enlighten">Enlighten</h4> <p>This Section gives an overview of the Enlighten diagram.</p> <p>Once the analysis/snapshot generation has completed, you can view the results in the normal manner:</p> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759145.png" alt=""></p> <p><strong>CAST Management Studio analysis content</strong></p> <p><strong><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759146.png" alt=""></strong></p> <h4 id="cms-configuration">CMS Configuration</h4> <p>This Section describes the CMS Configuration which is required to set HTML5 in CAST.</p> <p>In the <strong>Current Version tab</strong>, add a new Analysis Unit, selecting the <strong>Add new Universal Analysis Unit</strong> option:</p> <ul> <li>Edit the new Analysis Unit and configure in the <strong>Source Settings tab</strong>: <ul> <li>a <strong>name</strong> for the Analysis Unit</li> <li>ensure you tick the <strong>HTML5/JavaScript</strong> option</li> <li>define the <strong>location</strong> of the deployed HTML5/JavaScript source code (the CAST Management Studio will locate this automatically in the <strong>Deployment</strong> folder):</li> </ul> </li> </ul> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759144.png" alt=""><br> Do not add a dependency from this Analysis Unit to another client Analysis Unit.</p> <ul> <li>Run a <strong>test analysis</strong> on the Analysis Unit</li> <li>Make sure you have manually run the <strong>Import Assessment Models</strong> option.</li> </ul> <p><img src="https://doc-data.castsoftware.com/FBP/attachments/276759107/276759143.png" alt=""></p> <h4 id="tcc-configuration">TCC Configuration</h4> <p>This Section describes the TCC configuration which needs to be set.</p> <ul> <li><strong>eFile</strong> [or] <strong>.html</strong> files as Entry point</li> </ul> <h2 id="reference-materials">Reference Materials</h2> <table> <thead> <tr> <th>Topic</th> <th>Link</th> </tr> </thead> <tbody> <tr> <td>UTF-8 and Unicode</td> <td><a href="http://www.utf-8.com/">http://www.utf-8.com/</a></td> </tr> <tr> <td>HTML5 Introduction</td> <td><a href="https://www.w3schools.com/html/html5_intro.asp">https://www.w3schools.com/html/html5_intro.asp</a></td> </tr> <tr> <td>HTML5</td> <td><a href="https://en.wikipedia.org/wiki/HTML5">https://en.wikipedia.org/wiki/HTML5</a></td> </tr> <tr> <td>Learn HTML5 Programming From Scratch</td> <td><a href="https://www.udemy.com/learn-html5-programming-from-scratch/">https://www.udemy.com/learn-html5-programming-from-scratch/</a></td> </tr> <tr> <td>HTML5 Features</td> <td><a href="https://www.codecademy.com/articles/html5-features">https://www.codecademy.com/articles/html5-features</a></td> </tr> <tr> <td>HTML5</td> <td><a href="http://www.websitenero.com/application/content/html-module/basic-html/what-is-html.html">http://www.websitenero.com/application/content/html-module/basic-html/what-is-html.html</a></td> </tr> <tr> <td>HTML 5 Demos and Examples</td> <td><a href="https://html5demos.com/">https://html5demos.com/</a></td> </tr> <tr> <td>HTML5 Event Handling</td> <td><a href="https://dzone.com/refcardz/html5-new-standards-web-interactivity?chapter=9">https://dzone.com/refcardz/html5-new-standards-web-interactivity?chapter=9</a></td> </tr> <tr> <td>Rendering form template for HTML5 forms</td> <td><a href="https://helpx.adobe.com/aem-forms/6/html5-forms/rendering-form-template.html">https://helpx.adobe.com/aem-forms/6/html5-forms/rendering-form-template.html</a></td> </tr> <tr> <td>HTML5 : Form Input Elements</td> <td><a href="http://www.tutorialsdesk.com/2012/09/the-element-in-html5.html">http://www.tutorialsdesk.com/2012/09/the-element-in-html5.html</a></td> </tr> <tr> <td>HTML5 Events</td> <td><a href="http://www.tutorialsdesk.com/2012/09/html5-events.html">http://www.tutorialsdesk.com/2012/09/html5-events.html</a></td> </tr> </tbody> </table> </div> </main> </div> </div> <footer class="td-footer row d-print-none"> <div class="container-fluid"> <div class="row mx-md-2"> <div class="td-footer__left col-6 col-sm-4 order-sm-1"> <ul class="td-footer__links-list"> <li class="td-footer__links-item" data-bs-toggle="tooltip" title="X" aria-label="X"> <a href="https://x.com/SW_Intelligence" aria-label="X" target="_blank" rel="noopener"> <i class="fab fa-x-twitter"></i> </a> </li> <li class="td-footer__links-item" data-bs-toggle="tooltip" title="Facebook" aria-label="Facebook"> <a href="https://www.facebook.com/CASTSoftwareIntelligence" aria-label="Facebook" target="_blank" rel="noopener"> <i class="fab fa-facebook"></i> </a> </li> <li class="td-footer__links-item" data-bs-toggle="tooltip" title="YouTube" aria-label="YouTube"> <a href="https://www.youtube.com/channel/UCx_BN1Mr5gyYLh71yH3xs-w" aria-label="YouTube" target="_blank" rel="noopener"> <i class="fab fa-youtube"></i> </a> </li> </ul> </div><div class="td-footer__right col-6 col-sm-4 order-sm-3"> <ul class="td-footer__links-list"> <li class="td-footer__links-item" data-bs-toggle="tooltip" title="Linkedin" aria-label="Linkedin"> <a href="https://www.linkedin.com/company/cast/" aria-label="Linkedin" target="_blank" rel="noopener"> <i class="fab fa-linkedin"></i> </a> </li> <li class="td-footer__links-item" data-bs-toggle="tooltip" title="Pulse - CAST Blog" aria-label="Pulse - CAST Blog"> <a href="https://www.castsoftware.com/pulse" aria-label="Pulse - CAST Blog" target="_blank" rel="noopener"> <i class="fa-solid fa-blog"></i> </a> </li> </ul> </div><div class="td-footer__center col-12 col-sm-4 py-2 order-sm-2"> <span class="td-footer__copyright">© 2026 <span class="td-footer__authors">CAST</span></span><span class="td-footer__all_rights_reserved">All Rights Reserved</span> </div> </div> </div> </footer> </div> <script src="/export-v2/js/main.min.13094dc0b5b807ad8ec9ffe0750b80460723aabdc91c8fe865c36dd81188af28.js" integrity="sha256-EwlNwLW4B62Oyf/gdQuARgcjqr3JHI/oZcNt2BGIryg=" crossorigin="anonymous"></script> <script defer src="/export-v2/js/click-to-copy.min.24576ff9fe9f85bb1948ecae52ce227cafce53757a3ad52301f2a79260f6b97d.js" integrity="sha256-JFdv+f6fhbsZSOyuUs4ifK/OU3V6OtUjAfKnkmD2uX0=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3.8.2" integrity="sha512-lsD+XVzdBI6ZquXc8gqbw0/bgrfIsMJwY/8xvmvbN+U3gZSeG7BXQoCq4zv/yCmntR2GLHtgB+bD4ESPsKIbIA==" crossorigin="anonymous" ></script> <script type="text/javascript"> const containers = ['#docsearch-0', '#docsearch-1']; for (let c of containers) { if (!document.querySelector(c)) continue; docsearch({ container: c, appId: "VBLPVKDJJQ", apiKey: "f6f906150fd35ec5ba97c39e2a10de9e", indexName: "castsoftware_v2", maxResultsPerGroup: 10 , resultsFooterComponent({ state }) { return { type: 'div', ref: undefined, constructor: undefined, key: state.query + '-footer', props: { className: 'DocSearch-HitsFooter', children: { type: 'a', ref: undefined, constructor: undefined, key: state.query + '-link', props: { href: '\/export-v2\/search\/?query=' + encodeURIComponent(state.query), children: 'See all ' + state.context.nbHits + ' results', }, __v: null, }, }, __v: null, }; }, }); } </script> <script src='/export-v2/js/tabpane-persist.js'></script> </body> </html>