HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLテキストフォーマットの強調：太字、斜体、および下線

テキストをHTMLでフォーマットして、何かに注意を向ける方法はたくさんあります。この投稿では、HTMLのテキストを太字、斜体、または下線付きにフォーマットする方法について説明します。すぐにフォーマットのプロになります！

太字

テキストを太字に設定する HTML5より前のHTMLでは、太字にしたいテキストを<b>で囲む必要がありました。 タグ： 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is <b>bold</b></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5標準がリリースされたとき、テキストを太字にするための好ましい方法は、<strong> を使用するように変更されました。 タグ： 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is also <strong>bold</strong></p>
   <script src="script.js"></script>
 </body>
</html>

<b>の唯一の違い および<strong> 要素はセマンティクスです。スクリーンリーダーには<strong> が表示されます タグを付けて、テキストを読むときにテキストをより明確に強調します。 <b> それを許可していません。

斜体

太字と同じ 、イタリック体のテキストを作成するために私たちが知っている2つの異なる標準があります。 HTML5標準より前は、斜体のテキストは<i>にカプセル化して作成されていました。 タグ。 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is in <i>italics</i></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5が標準になると、<i> タグはよりセマンティックな<em>に道を譲りました 鬼ごっこ。 「em」はemphasisの略です。 。 <em> タグは、ユーザーが通常のテキストと強調されたテキストを区別できるように、テキストをより強調するようにスクリーンリーダーに通知します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

下線

HTMLの下線付きテキストは、スペルミスのある単語を示すために最もよく使用されます。ハイパーリンクと混同される可能性のある場所では使用しないでください。 <u>でテキストをマークアップします タグを付けてフォーマット用にマークを付け、CSSを使用して必要な下線スタイルのタイプを示します。 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <style>
     p u {
       text-decoration: underline red wavy;
     }
   </style>
 </head>
 <body>
   <p>This is a <u>mispelled</u> word</p>
 </body>
</html>



結論

この記事では、HTMLのフォーマットタグの多くについて説明しました。 との場合、これらを使用して、画面上で太字と斜体に見える要素にセマンティクスを適用します。スクリーンリーダーでは、これらの単語が強調されます。 タグを使用すると、テキストに下線を付けることができます。これらの3つに加えて、さらに多くのフォーマットオプションがあります。


  1. HTMLテキストフォーマット

    HTMLテキストフォーマットとは、HTMLドキュメントのコンテンツをフォーマットするために特別に設計されたHTML要素を指します。 構文 以下は構文です- <tagname>content</tagname> HTMLのテキストフォーマットタグは次のとおりです。 Sr.No。 タグと説明 1 HTMLドキュメントで太字のテキストを指定します。 2 HTMLドキュメントで強調されたテキストを指定します 3 HTMLドキュメント内の斜体のテキストを指定します。 4 HTMLドキ

  2. HTMLDOMアンダースコアオブジェクト

    HTMLのHTMLDOMアンダーラインオブジェクトは、要素を表します。 を作成する 要素 var uObject = document.createElement(“U”) 下線の例を見てみましょう 要素- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Underline</title> <style>    form {       width:70%;