テーブル「セル」や<div>タグ中にショートコードとテキスト（文章）を混在させたときに、Google HTMLエラーチェッカで確認すると構文エラーが発生するときがあります。
この原因は、Wordpressのビジュアルエディターとテキスト画面を行き来すると通常は自動整形されますが、要素内では自動整形機能が働かないことが原因のようです。 この要素内でのエラーを回避する注意点をブログします。
我が家の環境は、WordPress（4.9.10）、Affinger5テーマ、TinyMCE Advanced（バージョン 5.1.0）で 「段落タグの保持」を選択しています。
Google HTMLエラーチェッカとエラー表示
HTMLエラーチェッカーとは
Google Chromeで使用するGoogleで開発用に提供されているHTMLの開始・終了タグの過不足などを検出する拡張機能ツールです。 当サイトでも、投稿した記事のチェックで使用していて、簡単にHTMLのタグエラーが判り、中々便利です。
リンクURL
エラーチェックの表示
Google Chromeに「HTMLエラーチェッカー」を追加すると、Chromeの画面に検索アドレスバーの横に
←アイコンが表示されます。
チェックしたい、ページを表示させて、そのアイコンをクリックすると以下の様なウインドウが表示され何処にタグ・エラーがあるか表示してくれます。
エラー 無しの場合
エラー ありの場合
エラーが発生する条件
通常の投稿
要素を伴わないショートコードや文章では、ビジュアルからテキストに行き来すると下のように自動整形で<P>タグが付きます。 この場合はエラーにはなりません！
ビジュアルモード画面 [ショートコード]
テキストモード画面
テーブル「セル」にショートコードとテキスト（文章）が混在する場合
テキストモードで、テーブルの<td>内の内容によって、エラーが表出する場合があります。 以下の例は、エラーが表出する場合です。 テキストモードで、ショートコードの前後で<p>がついておらず、mp3の前後に<p>が付いています。 この場合、テキストからビジュアルに行き来しても、ショートコード前後に<p>が付きません。
ビジュアルモード画面
上記はテーブル「セル」にショートコードと「mp3」という文章が書かれています。
テキストモード画面
ポイント
上のテキストモード画面では、mp3に<P>タグで囲われていますが、ショートコードの[mejsaudio〜]の前後に<P>タグで囲われていません。 この状態でプレビューして、「HTMLエラーチェッカー」にかけると「</P>：開きタグがありません」とのエラーが表出してしまいます。 但し、ブラウザの画面崩れはなく、見かけは正常に表示されます。
エラーになる原因と改善方法
ココがダメ
エラー表出の原因
このエラー表出の原因は、テーブルの<td>要素内に<p>タグに囲われた要素と囲われていない要素が混在しているからと推察されます。
ココがポイント
エラー改善策
よって、エラーを無くすには、[mejsaudio〜]の前後に<P>タグを付けるか、逆に、mp3の前後の<p>タグを削除すれば、エラーの表出は無くなります。
この問題は、<div>タグ内でも同様の事象が生じますので、編集時に注意が必要です。