diff --git a/README.md b/README.md
index e78576b..d35f065 100644
--- a/README.md
+++ b/README.md
@@ -115,7 +115,7 @@ Calling the `dlx2html` function returns an HTML string.
This section describes the structure of the HTML output by this library, and the classes added to the HTML elements. You can see sample HTML output by the program in the `samples/` folder, as well as the [DLx Styles][Styles] library.
-**Note:** The output HTML has lots of extraneous whitespace and is poorly formatted. If you want more readable output, use a formatting library like [Prettier][Prettier] to format the result.
+**Note:** The output HTML does not contain much extraneous whitespace and therefore is not very human-readable. If you want more readable output, use a formatting library like [Prettier][Prettier] to format the result.
Each utterance/example in the original data is wrapped in a `
` element by default. You can customize both the tag that is used for the wrapper and the classes applied to it with the `tag` and `classes` options. For example, to wrap each utterance in `
`, you would provide the following options:
diff --git a/src/utterance/index.js b/src/utterance/index.js
index f2a5e4e..2940a8c 100644
--- a/src/utterance/index.js
+++ b/src/utterance/index.js
@@ -23,16 +23,19 @@ export default function convertUtterance(u, options) {
const { classes, tag } = options
const classString = classes.join(` `)
- return `<${ tag } class='${ classString }'>
- ${ header }
- ${ transcript }
- ${ transcription }
- ${ phonetic }
- ${ words }
- ${ translation }
- ${ literal }
- ${ source }
- ${ timespan }
- ${ tag }>`
+ const lines = [
+ header,
+ transcript,
+ transcription,
+ phonetic,
+ words,
+ translation,
+ literal,
+ source,
+ timespan,
+ ].filter(Boolean)
+ .join(``)
+
+ return `<${ tag } class='${ classString }'>${ lines }${ tag }>`
}