Body Text

<main class="main-wrapper">
    <article class="article-container">
        <section>
            <h2 class="heading2">Text</h2>
            <p class="body-text">
                <dfn><abbr title="HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）">HTML</abbr></dfn>でマークアップをした際に「そのコード群/UIパーツが、明確に意味を持っているか、それが人にもマシンにも伝わるようになっているか？言い換えるとセマンティックであるか？」が<dfn><abbr title="Web Accessibility Initiative – Accessible Rich Internet Applications">WAI-ARIA</abbr></dfn>（ウェイ・アリア）の記述で補足をすべきかどうかの判断基準だと思います。
            </p>
        </section>
        <div class="divider my32" role="separator"></div>
        <section>
            <h2 class="heading2">Link</h2>
            <p class="body-text">
                <a href="https://www.drifting-clouds.com" target="_blank" rel="noopener" class="link" title="外部リンク">https://www.drifting-clouds.com
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="13" height="13" role="img">
                        <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
                    </svg>
                </a>
            </p>
        </section>
        <div class="divider my32" role="separator"></div>
        <section>
            <h2 class="heading2">Inline Code</h2>
            <p class="body-text">
                <code class="language-markup">&lt;code class="language-html"&gt;コード&lt;/code&gt;</code>　<code class="language-css">.code { display: block; }</code>
            </p>
        </section>
        <div class="divider my32" role="separator"></div>
        <section>
            <h2 class="heading2">Highlight</h2>
            <p class="body-text">
                正直、あまり使う場面を想定していませんが、<mark class="highlight-cover">ハイライト (Highlight)</mark>はこんな感じで少しだけ強調したいときに使ってください。<br>
                演出としてハイライトをちょっと<mark class="highlight-shift">ずらしたいとき</mark>はこちらをどうぞ。
            </p>
        </section>
        <div class="divider my32" role="separator"></div>
        <section>
            <h2 class="heading2">Shortcut</h2>
            <p class="body-text">
                このツールでの当該操作のショートカットキーは<kbd class="shortcut">Shift</kbd>+<kbd class="shortcut">Command</kbd>+<kbd class="shortcut">↑</kbd>と<kbd class="shortcut">⌘ + スペース</kbd>です。
            </p>
        </section>
    </article>
</main>

<script src="../../js/vendor/prism.js"></script>