# data[].attributes.body
Thymeleaf pages are built by embedding common page component code directly within each view to generate the final result.

# data[].attributes.body
Templates usually take advantage of inheritance, which includes a single base template that defines the basic structure of all subsequent child templates. You use the tags {% extends %} and {% block %} to implement inheritance.

# data[].attributes.body
Style and JavaScript standard for Website

# data[].attributes.body
This area is where majority of the customization for a page belong.

# data[].attributes.body
HTML documents can be repetitive from file to file.  Template Engines are tools that help us break HTML code into smaller pieces that we can reuse across multiple HTML files as reusable parts shown in this illustration. Flask uses Jinja, Spring uses Thymeleaf. Both of these provide scripting that allow you to feed variables and logic into HTML.

# data[].attributes.headline
Jinja Layout - hides HTML and uses blocks to replace layout definition, it does not retain HTML.  Note... Python can render without rebuild.

# data[].attributes.subject
Jinja Layout - hides HTML and uses blocks to replace layout definition, it does not retain HTML.  Note... Python can render without rebuild.

# data[].attributes.body
<!-- See base.html in GitHub -->
<!-- See usage example in GitHub -->
<!DOCTYPE html>
| {% extends "homesite/base.html" %}
|  {% block content %}

| {% endblock %}

# data[].attributes.headline
Thymeleaf Layout - a big focus is to maintain HTML doc in each fragment and layout.  This allows file based development prior to build.

# data[].attributes.subject
Thymeleaf Layout - a big focus is to maintain HTML doc in each fragment and layout.  This allows file based development prior to build.

# data[].attributes.body
<!-- See fragments in GitHUB -->
<!-- See usage example in GitHub -->
<!-- This page is illustrative and contains ideas about HTML formatting -->
| <!DOCTYPE HTML>
| <html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" lang="en">
|

| <!-- Head, think of things that are more meta or format oriented -->
| <head>
|     <div th:replace="fragments/headfile :: header"></div>
|     <!-- Head defaults to ellipses, details are added by ThymeLeaf layout fragment -->
|     <div layout:fragment="metadata">...</div>
| </head>
|

| <body>
|     <!-- Header of Page, includes Navigation -->
|     <div th:replace="fragments/header :: header"></div>
|

|     <!-- Body defaults to ellipses, details are added by ThymeLeaf layout fragment -->
|     <div layout:fragment="content">...</div>
|

|     <!-- Footer of Page, includes things like contacts or copywrite -->
|     <div th:replace="fragments/footer :: footer"></div>
| </body>
| </html>

# data[].attributes.body
<head>
<!-- Head Fragment -->

</head >

# data[].attributes.body
<body>
<!-- Navbar Fragment -->

<!-- Footer Framen ->
</body>