Getting Rid of Extra Markup in TYPO3

By: Ron Hall

How to modify or eliminate extra CSS and HTML markup in TYPO3

In trying to make TYPO3 as flexible as possible, developers have included plenty of handles for styling a page in the HTML code output by TYPO3.

For example, if you put two content elements on a TYPO3 page, by default the source code looks like this:

<a id="c98"></a>
<div class="csc-header csc-header-n1">
    <h3 class="csc-firstHeader">This is the First Header</h3>
</div>
<p class="bodytext">This is the first paragraph</p>
<a id="c99"></a>
<div class="csc-header csc-header-n2">
    <h3>This is the Second Header</h3>
</div>
<p class="bodytext">This is the second paragraph.</p>

This is all fine and dandy, but maybe you don't need all of these classes and anchors. Fortunately, TYPO3 core team has accomodated for that as well. Try this code in your TypoScript template:

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.stdheader.stdWrap.dataWrap >
lib.stdheader.3.headerClass >
tt_content.stdWrap.dataWrap >

The resulting HTML code for the same content elements will now look like this.

<h3>This is the First Header</h3>
<p>This is the first paragraph</p>
<h3>This is the Second Header</h3>
<p>This is the second paragraph.</p>

Basically, you have eliminated the anchors, the div tags and the class styles. Of course, you can also use this code to simply modify the code instead of eliminating it. For instance,

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class = my-style

will change

<p class="bodytext">This is the first paragraph</p>

to this:

<p class="my-style">This is the first paragraph</p>

However, note that using

tt_content.stdWrap.dataWrap > 

to eliminate the anchor tag can be a problem if you are generating a sitemap. See this post on the TYPO3 mailing list.

Finally, thanks to Jeff Segars of WEC for putting me on the trail of the code to eliminate the anchors.