HTL/Sightly: "Use and call template" pattern. Put template into separate file for reusability, and pass parameters when calling it. Note that in most cases it's not necessary to pass "properties" to the template because they work even if they're not passed explicitly.

component.html

<sly data-sly-use.component="template.html"
    data-sly-call="${component.template @ properties=properties}" />

same-file__component.html

<template data-sly-template.templateText="${@ properties}">
  <div data-sly-resource="${'text' @ resourceType='core/wcm/components/text/v1/text'}"></div>
</template>

<sly data-sly-call="${templateText @ properties=properties}" />

template.html (in this case in same directory)

<template data-sly-template.template="${@ properties}">
  <p>${properties.onePropertyValue @ i18n}</p>
</template>

use-placeholder-template.html

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
    data-sly-call="${templates.placeholder @ isEmpty = true}"></sly>