> ## Documentation Index > Fetch the complete documentation index at: https://docs.codeant.ai/llms.txt > Use this file to discover all available pages before exploring further. # Html

Using a \

  • or \
    item tag outside of a \
      , \
        or \
        one does not make sense and indicates a bug.

    • ```html Bad theme={null}
  • Apple
  • Strawberry
  • Apple
  • Strawberry
    • Apple
    Strawberry
    ``` ```html Fix theme={null}
    • Apple
    • Strawberry
    1. Apple
    2. Strawberry
    Apple
    Strawberry
    ```

    If a \`\ cell has a headers attribute, it should reference only IDs of headers in the same column and row.

    Note that it is usually better to use scope attributes of \ headers instead of headers attribute. headers attribute requires you to list every corresponding \ header’s id, which is error-prone and makes the code less maintainable. See W3C WAI Web Accessibility Tutorials for more information.

    If your table is too complex, it might be better to split it into multiple small tables as it improves both readability and maintainability.

    This rule raises an issue when the headers attribute of a \\` cell contains IDs which don’t belong to a header in the same row or column.

    ```html Bad theme={null}
    Rental price
    Small car Big Car
    Paris
    1 day 11 euros 50 euros
    ``` ```html Fix theme={null} ```

    The \`\ declaration tells the web browser which (X)HTML version is being used on the page, and therefore how to interpret the various elements.

    Validators also rely on it to know which rules to enforce.

    It should always preceed the \\` tag.

    ```html Bad theme={null} ... ``` ```html Fix theme={null} ... ```

    Tables used for layout should not include semantic markup, such as \`\ elements, as it can confuse assistive technologies. At best this information is ignored by screen readers and makes the code less maintainable. However it can also confuse some screen readers and reduce the web page accessibility.

    This rule raises an issue when a \ element containing the role attribute set to "presentation" or "none" also contains any of:

    • a \

    element

  • a \

    • element

  • a non-empty summary attribute

  • an \

    		•  element with a headers or scope\` attribute

    ```html Bad theme={null}
    People
    Name Age
    1 John Doe 24
    2 Alice Doe 54
    ``` ```html Fix theme={null} ```

    Titles are important because they are displayed in search engine results as well as the browser’s toolbar.

    This rule verifies that the \ tag contains a \ one, and the \<html> tag a \<head></code> one.</p> </div> <div class="paragraph" /> <CodeGroup> ```html Bad theme={null} <html> <!-- Non-Compliant --> <body> ... </body> </html> ``` ```html Fix theme={null} <html> <!-- Compliant --> <head> <title>Some relevant title ... ```

    Associating \`\ headers, i.e. \\n"); } if(count > 0){ %>
    elements, with their \ cells enables screen readers to announce the header prior to the data. This considerably increases the accessibility of tables to visually impaired users.

    There are two ways of doing it:

    • Adding a scope attribute to \

    		 headers.

  • Adding an id attribute to \

    		•  headers and a headers attribute to every \ element.

    It is recommended to add scope attributes to \

    		 headers whenever possible. Use \ and \ only when \ is not capable of associating cells to their headers. This happens for very complex tables which have headers splitting the data in multiple subtables. See W3C WAI Web Accessibility Tutorials for more information.

    Note that complex tables can often be split into multiple smaller tables, which improves the user experience.

    This rule raises an issue when a \

    		 element has neither id nor scope\` attributes set.

    ```html Bad theme={null}
    Contact Information
    Name Phone# City
    1. Joel Garner 412-212-5421 Pittsburgh
    2. Clive Lloyd 410-306-1420 Baltimore
    ``` ```html Fix theme={null}
    Contact Information
    Name Phone# City
    1. Joel Garner 412-212-5421 Pittsburgh
    2. Clive Lloyd 410-306-1420 Baltimore
    ```

    The \`\/\ and \/\ tags have exactly the same effect in most web browsers, but there is a fundamental difference between them: \ and \ have a semantic meaning whereas \ and \ only convey styling information like CSS.

    While \ can have simply no effect on a some devices with limited display or when a screen reader software is used by a blind person, \ will:

    • Display the text bold in normal browsers

    • Speak with lower tone when using a screen reader such as Jaws

    Consequently:

    • in order to convey semantics, the \ and \ tags shall never be used,

    • in order to convey styling information, the \ and \\` should be avoided and CSS should be used instead.

    ```html Bad theme={null} car train ``` ```html Fix theme={null} car train ```

    Just because you can do something, that doesn’t mean you should, and the use of full-fledged Java in a JSP or JSF falls into that category.

    Beside the fact that such code isn’t resuable, testable, maintainable or OO-inheritable, using Java in such client-side pages can leave you incredibly vulnerable from a number of perspectives including security and resource management.

    Instead, any heavy-duty logic should happen server-side in a full-fledged Java class. For lighter-weight functions, taglibs should be used.

    This rule flags all uses of JSP declarations (\<%! ... %> and \...\) and scriptlets (\<% ... %>).

    ```html Bad theme={null} <%! // Noncompliant private Connection conn = null; public void init() { try { Class.forName("org.hsqldb.jdbcDriver" ); conn = DriverManager.getConnection("jdbc:hsqldb:mem:SQL", "sa", ""); } catch (SQLException e) { getServletContext().log("Db error: " + e); } catch (Exception e) { getServletContext().log("System error: " + e); } } %> <% // Noncompliant Statement stmt = conn.createStatement(); ResultSet rs = null; String query = StringEscapeUtils.escapeHtml4(query).replaceAll("'", "'"); try { String sql = "SELECT PRODUCT, DESC, TYPE, PRICE " + "FROM PRODUCTS" + "WHERE PRODUCT LIKE '%" + query + "%'"; rs = stmt.executeQuery(sql); String output = ""; int count = 0; while (rs.next()) { count++; output = output.concat("
    " + rs.getString("PRODUCT") + "" + rs.getString("DESC") + "" + rs.getString("TYPE") + "" + rs.getString("PRICE") + "
    <%= output %>
    ProductDescriptionTypePrice
    <% // Noncompliant } } catch (Exception e) { // ... ``` ```html Fix theme={null} <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    ${product.name} ${product.description} ${product.type} ${product.price}
    ```

    When parsing a script node, the browser treats its contents as plain text, and immediately finishes parsing when it finds the first closing \`\ character sequence.

    As a consequence, nested script nodes are not possible, because all opening \ elements. But there is no error in such case and browsers just close the first encountered \\` tag is found along the way. So there is a big chance to display something totally unexpected to the end-users.

    ```html Bad theme={null} ``` ```html Fix theme={null} ```

    This rule allows you to make sure that each HTML page contains an element with your configured ID, regardless of element type. This rule is useful, for instance, if your design requires a placeholder to be present in each page, for example to dynamically insert a footer.

    ```html Bad theme={null}
    ...
    ``` ```html Fix theme={null} ```

    It is considered best-practice to use relative URLs in web pages to prevent having to update the addresses if the web address in use changes. Moreover, if some absolute URLs are missed in such a process, it will obviously impact the user experience.

    ```html Bad theme={null} Smiley face ``` ```html Fix theme={null} Smiley face ```

    In order to be accessible to visually impaired users, it is important that tables provides a description of its content before the data is accessed.

    The simplest way to do it, and also the one recommended by WCAG2 is to add a \`\

     element inside the \.

    Other technics this rule accepts are:

    .

  • referencing a description element with an aria-describedby attribute in the \

    • .

  • embedding the \

    • inside a \
    which also contains a \
    .

  • adding a summary attribute to the \

    • tag. However note that this attribute has been deprecated in HTML5.

    See W3C WAI Web Accessibility Tutorials for more information.

    This rule raises an issue when a \

    \` has neither of the previously mentioned description mechanisms.

    ```html Bad theme={null}
    ...
    ``` ```html Fix theme={null}
    ...
    New York City Marathon Results 2013
    ```

    Long pieces of JavaScript should be located in dedicated \*.js source files. This makes maintenance of both the script and the pages that use it easier. Additionally, it offers some efficiencies in serving the files, since it takes better advantage of browser caching to only re-serve the parts of a web page that have actually changed.

    ```html Bad theme={null} ... ``` ```html Fix theme={null} ... ```

    This rule checks that the specified attributes are present in HTML tags.

    ```html Bad theme={null} ``` ```html Fix theme={null} Elizabeth II ```

    Browsers best support the \`window mode for the wmode parameter, also in terms of accessibility.

    As it is the default mode, it is acceptable to either not specify a wmode parameter altogether, or to set it explicitly to window\`.

    ```html Bad theme={null} type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> ``` ```html Fix theme={null} ```

    The \`\ element should provide the lang and/or xml:lang attribute in order to identify the default language of a document.

    It enables assistive technologies, such as screen readers, to provide a comfortable reading experience by adapting the pronunciation and accent to the language. It also helps braille translation software, telling it to switch the control codes for accented characters for instance.

    Other benefits of marking the language include:

    • assisting user agents in providing dictionary definitions or helping users benefit from translation tools.

    • improving search engine ranking.

    Both the lang and the xml:lang\` attributes can take only one value.

     

    ```html Bad theme={null}              A page written in english                             ...        ``` ```html Fix theme={null}              A page written in english                             ...        ```

    This rule checks that the specified HTML elements are not present.

    ```html Bad theme={null}
    Hello World!
    ``` ```html Fix theme={null}
    Hello World!
    ```

    Heading tags are used by search engines and screen reader softwares to construct an outline of the page.

    Starting at \

    and not skipping any level eases this automatic construction.

    ```html Bad theme={null}

    My Title

    My Sub Title

    ``` ```html Fix theme={null}

    My Title

    My Sub Title

    ```

    Most browsers automatically fill the content of input elements of type 'password' when this password has already been provided in the past.

    Imagine that user B takes control of a machine belonging to a user A. Accessing a secured web site as user A is trivial for user B if form input elements are automatically filled in by the browser on the site’s login page.

    HTML 5 specifies the ability to turn this functionality off on a field-by-field basis using the autocomplete attribute, but most modern browsers ignore it in favor of their own password management.

    ```html Bad theme={null} ``` ```html Fix theme={null} ```

    HTML5 introduces the ability to restrict the permissions of content loaded into an \`iframe. Simply adding the sandbox attribute to an iframe tag limits the iframe to simply loading the specified contents; no scripts will run, no popups will pop, and so on. You can re-enable additional functions individually by specifying them in the attribute’s value:

    • allow-forms - form submission

    • allow-popups - popups

    • allow-scripts - script execution

    • allow-pointer-lock - access to the "pointer lock" API

    • allow-same-origin - sandboxed content is marked as being from a different domain (even when it’s not). This attribute turns that off so that, for instance, the iframe content can access its site’s cookies.

    • allow-top-navigation - turns the target attribute of a tags back on

    Following the principle of minimum privileges, this rule raises an issue for each iframe which does not have a sandbox\` attribute.

    ```html Bad theme={null} ``` ```html Fix theme={null} ```

    This rule checks that the specified child elements are present inside the specified parent elements.

    ```html Bad theme={null} ... ``` ```html Fix theme={null} My Page ... ```

    There are two ways to build a link that has the sole purpose of running JavaScript code. The goal of this rule is to ban such patterns in order to support browsing with JavaScript disabled.

    ```html Bad theme={null} Run JavaScript Code Run JavaScript Code Jump down the page to me ``` ```html Fix theme={null} Jump down the page to me ```

    The assignment of a boolean variable inside the test of a control structure such as an if, while or for loop is almost always a mistake and should be corrected to avoid unexpected program results. In fact, even if it was done on purpose, it should be re-examined.

    ```html Bad theme={null} boolean b = false; if ( b = m.getTrue()) { ... } // Noncompliant while (b = getTrue()) { ... } // Noncompliant; unintentionally infinite for (int i = 0; i < 10 && b = getTrue(); i++) { ... } // Noncompliant ``` ```html Fix theme={null} boolean b = false; if ( b = m.getTrue()) { System.out.println("How did we get here"); } ```

    If the width and height attributes are set, the space required for the image is reserved immediately by the browser, even before it actually starts to load the image.

    Without those attributes, the page layout constantly changes as images are loaded until they are all loaded, which can disorient users.

    ```html Bad theme={null} My Company ``` ```html Fix theme={null} My Company ```

    The \`\ tag is used by Internet Explorer 3.0 or later on Windows platforms or any browser that supports the use of the Flash ActiveX control. The \ tag is used by Netscape Navigator 2.0 or later, or browsers that support the use of the Netscape-compatible plug-in version of Flash Player.

    When an ActiveX-enabled browser loads the HTML page, it reads the values set on the \ and ignores the \ tag. When browsers using the Flash plug-in load the HTML page, they read the values set on the \ tag and ignore the \\` tag.

    ```html Bad theme={null} width="550" height="400" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> ``` ```html Fix theme={null} width="550" height="400" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> ```

    This rule checks that the disallowed tag libraries are not used.

    ```html Bad theme={null} <%@ taglib uri="http://java.sun.com/jstl/sql" prefix="prefixOfTag" > ``` ```html Fix theme={null} ```

    This rule checks that the specified child tag does not appear as a direct child of the specified parent.

    ```html Bad theme={null} ... ... ``` ```html Fix theme={null} ... ```

    Checker to find use of single quote where double quote is preferred.

    ```html Bad theme={null} ``` ```html Fix theme={null} ```

    Checker to find use of double quote where single quote is preferred.

    ```html Bad theme={null} <div id="header"></div> ``` ```html Fix theme={null} <div id='header'></div> ```

    This rule allows to make sure that all JSF Expressions are syntactically correct.

    ```html Bad theme={null} First name ``` ```html Fix theme={null} ```

    Use of \ is discouraged by the World Wide Web Consortium (W3C).

    If a user clicks the 'Back' button, some browers will go back to the redirecting page, which will prevent the user from actually going back.

    To refresh the page, a better alternative is to use Ajax, to refresh only what needs to be refreshed and not the whole page.

    To redirect to another page, using the HTTP response status code 301 'Moved Permanently' and 302 'Found' is a better option.

    ```html Bad theme={null} ``` ```html Fix theme={null} ```

    The \`alt attribute provides a textual alternative to an image.

    It is used whenever the actual image cannot be rendered.

    Common reasons for that include:

    • The image can no longer be found

    • Visually impaired users using a screen reader software

    • Image loading is disabled, to reduce data consumption on mobile phones

    It is also very important not to set an alt attribute to a non-informative value. For example, \logo is useless as it doesn’t give any information to the user. In this case, as for any other decorative image, it is better to use a CSS background image instead of an \ tag. If using CSS background-image is not possible, an empty alt="" is tolerated. See Exceptions below.

    This rule raises an issue when:

    • An \ or \ element has no alt attribute or it holds an empty string value.

    • An \ element has no alt\` attribute.

    ```html Bad theme={null}
    • ``` ```html Fix theme={null} A blooming tulip ```

    JSP expressions (using \<%= ... %>) have been deprecated because they:

    • Are not unit testable.

    • Are not reusable.

    • Cannot make use of object oriented concepts such as inheritence.

    • Have poor error handling capabilities: if an exception is thrown, an empty page is rended.

    • Mix the business and presentation logic.

    JSP Standard Tag Library (JSTL) and Expression Language should be used instead, enabiling the adoption of the model-view-controller (MVC) design pattern which reduces the coupling between the presentation tier and the business logic.

    ```html Bad theme={null} " /> ``` ```html Fix theme={null} ```

    This rule raises an issue when a configured Java package or class is used in a JSP file.

    ```html Bad theme={null} <%@ page import="java.sql.*" %> <% java.util.ArrayList clients; %> <% java.lang.String name; %> ``` ```html Fix theme={null} ```

    This rule checks that the specified attributes are not present in HTML tags.

    ```html Bad theme={null} ``` ```html Fix theme={null} ```

    Even if all browsers are fault-tolerant, HTML tags should be closed to prevent any unexpected behavior.

    ```html Bad theme={null} Test Page <!-- Noncompliant; title not closed --> <!-- Noncompliant; head not closed --> <body> <em>Emphasized Text <!-- Noncompliant; em not closed --> <!-- Noncompliant; body not closed --> </html> ``` ```html Fix theme={null} <html> <head> <title>Test Page Emphasized Text ```

    HTML \ elements should not be used for layout purpose as it can confuse screen readers. It is recommended to use CSS instead.

    This rule raises an issue on every \

    element containing a role attribute set to "presentation" or "none", which is how W3C recommends marks layout tables.

    ```html Bad theme={null}
    ``` ```html Fix theme={null} ```

    The \`ismap attribute in an img tag creates a server-side image map: The browser sends the coordinates of the clicked point to the server.

    For any person who cannot use a mouse, this form of navigation is inaccessible because it is the position of the cursor on the image that determines the action.

    On the other hand, client-side image maps, which use the usemap\` attribute allow for each clickable area to specify an alternate text, enabling accessibility for the blind.

    Further, in terms of separation of concerns, it is definitely better to leave the task of mapping pixels to links to the client.

    ```html Bad theme={null} ``` ```html Fix theme={null} France Spain England ```

    Table headers are essential to enhance the accessibility of a table’s data, particularly for assistive technologies like screen readers. These headers provide the necessary context to transform data into information. Without headers, users get rapidly lost in the flow of data.

    This rule raises an issue whenever a \ does not contain any \
    elements.

    ```html Bad theme={null}
    Name Age
    John Doe 42
    ``` ```html Fix theme={null} ```

    Whenever a user clicks on a link that targets an image, the website’s navigation menu will be lost.

    From a user point of view, it is as if she left the website.

    The only way to return to it is using the browser’s 'Back' button.

    Instead, it is better to create a page which will display the image using the \`\ tag and preserve the navigation menu.

    Further, in terms of accessibility, when the image is embedded into a page, content providers are able to provide an alternate text equivalent through the alt\` attribute.

    ```html Bad theme={null} ... ``` ```html Fix theme={null} ... ```

    The \`\