テキスト要素:段落、リスト、強調
適切なテキストタグで実際のコンテンツをマークアップします。
「テキスト要素:段落、リスト、強調」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Mark Up Real Content
Text is most of the web, so marking it up correctly matters most. The right text elements make content readable for everyone, including screen reader users.
Paragraphs Are p
Wrap each block of prose in a p tag. It groups sentences into a real paragraph that assistive tech can navigate one chunk at a time.
<p>Accessibility helps everyone.</p>Do Not Fake Spacing
Avoid stacking empty divs or br tags to space text. Use real paragraphs and let CSS handle the gaps. Structure should come from the tag, not the styling.
Lists Are for Lists
When items belong together, use a real list. Screen readers announce the count, like list of three items, giving users instant context.
Unordered vs Ordered
Use ul when order does not matter and ol when it does, like steps. Each item lives in an li, never a loose div.
<ol>
<li>Open the door</li>
<li>Step inside</li>
</ol>Emphasis Means em
The em tag marks words you would stress when speaking. Screen readers can change tone, so the emphasis is actually heard, not just seen.
<p>This is <em>really</em> important.</p>Importance Means strong
The strong tag flags text of high importance, like a warning. It is meaning, not just bold styling, so it carries weight to assistive tech.
b and i Are Visual Only
The b and i tags only change appearance with no added meaning. Reach for em and strong when the stress or importance actually matters.
Quotes Have Tags Too
Use blockquote for a quoted block and q for a short inline quote. The semantics tell users the words came from somewhere else.
<blockquote>Build for everyone.</blockquote>Code and Abbreviations
Wrap inline code in code and spell out shortenings with abbr. These small tags add the precise meaning sighted readers infer from context.
<abbr title="Accessibility">a11y</abbr>Meaning Over Looks
The rule for text is simple: choose the tag for its meaning, then style it freely. Looks are CSS; structure is HTML.
Quick Check
Let us pick the meaningful tag.
Recap
Use p for prose, ul and ol for lists, and em and strong for real emphasis. Pick tags for meaning and leave the looks to CSS. 🎉
よくある質問
「テキスト要素:段落、リスト、強調」レッスンは無料ですか?
はい。「テキスト要素:段落、リスト、強調」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「テキスト要素:段落、リスト、強調」で何を学びますか?
適切なテキストタグで実際のコンテンツをマークアップします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「テキスト要素:段落、リスト、強調」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか?
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。