Tool which validates front-end structure of rendered pages

Question

In my project, we are following microfrontend architecture where HTML pages are being constructed by amalgamation of multiple web-components. This results combination multiple HTML files into a single HTML file. By doing so, we have the risk of having a broken HTML code which is not syntactically valid.

To combine multiple dynamically generated HTML pages at runtime we are using nginx reverse proxy.

I want to a tool which can aid identifying such scenarios and provide suitable assistance to mitigate the same.

Let me know if there's any pretty tool or something

For Example: This is my main page:

<!DOCTYPE html>
<div th:fragment="add-app(page_title, content_as_html, alert_html, menuitemid)">
  <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>my title</title>
      <link rel="shortcut icon" th:href="@{/favicon.ico}" />
      <!--#include virtual="/commons/inc/resources" --> <!-- It s separate component named as resource.html which is included here via nginx dynamically-->
    </head>

    <body>
      <div class="overlay"></div>

      <th:block th:replace="${alert_html}" />
      <div class="my-custom-class position-relative">

          <a
            class="account-page-button d-flex align-items-center"
            th:href="@{/}"
            th:classappend="${menuitemid == 'App'? 'account-page-button--current' : '' }"
          >
            Apps
          </a>
      </div>

      

<!--# include virtual="/commons/inc/footer" -->

 <!-- It s separate component named as footer.html which is included here via nginx dynamically-->
    </body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script th:src="@{/apps/js/my-account.js}"></script>
  </html>
</div>

The Resource.html page:

<link rel="icon" type="image/ico" href="/icons/favicon.ico" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700,900&display=swap" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="@{/lib/bootstrap/js/bootstrap.min.js}"></script>

The footer.html page:

<footer class="main-footer">
    <link rel="stylesheet" th:href="@{/css/footer.css}" />
    <div class="main-footer__row">
        <div class="main-footer__link-container">
            <a class="main-footer__link" href="#"> &copy; 2020 myproject&reg; </a>
        </div>

        <div class="main-footer__link-container">
            <a class="main-footer__link" th:href="@{/terms/website}"> Website Terms of Use </a>
        </div>
        <div class="main-footer__link-container">
            <a class="main-footer__link" th:href="@{/legal/privacy}"> Privacy Policy </a>
        </div>

        <div class="main-footer__link-container">
            <a class="main-footer__link" href="#"> All prices exclude VAT </a>
        </div>
    </div>
</footer>

Please note down  and  tags. There are to include resources.html and footer.html pages, These tags gets resolved by nginx and nginx will replace these tags with the content of resources.html and footer.html respectively.

I want such a tool which can validate the final outcome i.e., the html page which nginx generates after resolving all  tags.

yes its a helpful tool but we have to copy paste the whole html content manually and then it will validate the page, in my case the pages are getting generated at runtime via nginx. which can be directly showed into the browser. i want something which can get the page url from nginx and validate it. or may be some javascript which can be invoked to validate the html content before sending it to browser for display. — rohit, Jul 21 '20 at 10:36

score 0 · Answer 1 · answered Aug 25 '20 at 11:05

users.skynet.be/mgueury/mozilla/ extension for Chrome and Firefox works great to report the syntactical as well as semantic problems in the markup. It is also possible to ask HTML Validator to propose a corrected version of the page in HTML or convert it to XHTML.

Apart from above sonar with plugin https://www.sonarsource.com/html/ can also be used to have html validation during the build process.

Tool which validates front-end structure of rendered pages

1 Answers1