これらの9つのHTMLタグなしで単一のブログ投稿を公開しないでください
ブログを運営している場合は、基本的なHTMLを理解することが絶対に必要です。
まだご存じない方のために説明すると、HTMLはハイパーテキストマークアップ言語の略です。これは、WebブラウザにWebページの読み方を指示するコーディング言語です。
HTMLタグは、これらのさまざまな種類の要素のコンテナです。それらは、内部の各コードの名前または省略形が付いた山形文字で構成されています。
タグは通常<>で開き、</>で閉じます。
HTML5は、WorldWideWeb全体で使用されているHTMLマークアップ言語の5番目で現在のメジャーバージョンです。
HTML5の使用はビジネス業界で最も一般的ですが、これは当然のことです。
貼り付けた画像0472
しかし、HTMLは真面目なブロガーにとって便利です。
初めて使用する場合は、コード全体が文字、記号、スペルミスのある単語がごちゃ混ぜになっているように見えることがあります。
良いニュースは、ブログに基本的なタグを追加するために、天才である必要も、高度なコーディングを知っている必要もないということです。
実際、コードの大部分を理解していなくても、HTMLタグを正常に使用できます。
ただし、いくつかの用語を理解し、いくつかのタグを使用してブログ投稿の品質とブロガーとしての能力を高める方法を知っている必要があります。
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
この記事では、次のブログ投稿で使用する必要がある9つのHTMLタグについて説明します。
ただし、最初に、HTMLタグをブログ投稿に含めることが非常に重要である理由は次のとおりです。
ブログにHTMLタグが必要な理由
ほとんどのトップブロガーは、HTMLで書く方法を知っています。
なんで？
それは彼らが彼らのコンテンツでやりたいことを（ほとんど）何でもすることを可能にします。これらのタグも同じ自由を与えることができます。
たとえば、画像を投稿の中央、右側、または左側に配置したい場合は、HTMLが答えです。
リストをすばやく作成したり、改行を追加したり、自分でブロック引用符を作成したりする場合は、HTMLがまさに必要なものです。
WordPressのテキストエディタをビジュアルではなくHTMLビューに切り替えると、読み込みがはるかに速くなります。
貼り付けた画像0463
「HTML」または「テキスト」ボタンをクリックするだけで切り替えられます。違いは次のとおりです。
貼り付けた画像0455
手がキーボードから離れる必要がないため、HTMLでの書き込みがはるかに高速になります。さらに、コンテンツの構造とデザインを完全に制御できます。
HTMLはどのテキストエディタでも書くことができます。 WordPressだけで書く必要はありません。
ただし、WordPressでは一部のHTMLが制限されているため、コーディングのスキルが上がるにつれて、この点に注意してください。
WordPressは一部のHTMLタグを制限します
インターネット上のすべてのコンテンツ管理システム（CMS）の中で、WordPressが最も人気があります。
実際、BuiltWithによると、CMSで構築されたすべてのサイトの53％がWordPressを使用しています。
貼り付けた画像0473
WordPressの投稿コンテンツ領域に間違ったコードを入力すると、WordPressはそれを次のような紛らわしい文字を含むプレーンテキストに変換します。
＆lt;太字＆gt;太字の単語＆lt; / bold＆gt;。
これらの文字が表示されている場合は、入力したコードでWordPressで問題が発生したことを意味します。
WordPressがブログ投稿のすべてのHTMLタグを許可しているわけではないことに注意することも重要です。 embed、frame、iframe、form、input、object、textareaなどのコードは許可されていません。
ただし、AddQuicktagなどのプラグインを使用して、WordPressテキストエディタにボタンを追加できます。
貼り付けた画像0475
このツールを使用すると、次のように独自のタグをカスタマイズできます。
貼り付けた画像0470
HTMLタグにもう少し慣れると、このプラグインはゲームチェンジャーになります。
それでは、リストから始めて、ブログ投稿を作成するために必要な重要なHTMLタグについて見ていきましょう。
1.リストの作成
リストを作成するには、次のタグを使用できます：<ul>、<ol>、および<li>。
「順不同」または箇条書きのリストは、HTML形式で次のように表示されます。
<ul><li>インゲン</li>
<li>じゃがいも</li>
<li>トマト</li>
<li>チキン</li></ ul>
これは次のように表示されます。
サヤインゲン
ポテト
トマト
鶏
順序付きリストは少し異なります。次のように表示されます。
サヤインゲン
ポテト
トマト
鶏
箇条書きではなく数字を使用するには、<ol>と</ol>の<ul>と</ul>を切り替えます。結果は、次のような番号付きリストになります。
貼り付けた画像0460
注意しないと、コードを入力するときに間違いを犯しやすくなります。別のタグを開く前に、必ず1つのタグを閉じてください。
他の親リストアイテム内にネストされたリストを作成することもできます。
貼り付けた画像0451
これは、アイテムまたはトピックの複数のカテゴリを一度にリストする必要がある場合に特に便利です。
画像はブログの重要な部分です。しかし、画像タグを使用して画像をカスタマイズする方法を知っていますか？
2.画像タグ
画像はあなたのブログを視覚的に魅力的にします。
画像タグコードはあまり手書きされませんが、ブログに追加する画像のサイズをカスタマイズするのに役立ちます。
ほとんどの人はthを使用します
e画像コードを書き出す代わりにWordPressを使用している場合は、[メディアの追加]ボタン。
貼り付けた画像0454
<img>タグは、HTMLページの画像を定義するものです。彼らはこのように見えるかもしれません：
<img src =” https://neilpatel.com/wp-content/uploads/2015/11/neilad3.png” width =” 350” height =” 350” alt =””>
これは、私のブログ投稿の1つにあるこの画像のHTMLタグです。
貼り付けた画像0458
ページのコードを調べると、画像タグは次のようになります。
貼り付けた画像0452
WordPressには画像のタイトルが必要ですが、代替の説明は必要ありません。できるだけ頻繁に画像に代替テキストを追加することをお勧めします。
代替テキストは、画像の説明を次のレベルに引き上げ、画像（したがってブログ投稿）がSERPに表示される可能性を高めます。
ブログ投稿に画像をアップロードして埋め込むときは、使用しているCMSに関係なく、必ず代替テキストを追加してください。
メディアライブラリに代替テキストを追加するのを忘れた場合は、後でテキストエディタでいつでも追加できます。
貼り付けた画像0456
画像が小さすぎたり大きすぎたりする場合は、テキストエディタでサイズを変更できます。
画像の幅が「400」で高さが「700」の場合は、高さを削除して幅を変更するだけです。入力した幅に応じて高さが調整されます。
次に、HTMLタグを使用してリンクを追加する方法について説明します。
3.リンク
リンクは検索ランキングを上げるので、ブログの投稿に絶対に含める必要があります。
HTML用語では、リンクはアンカーと呼ばれることがよくあります。
リンクのコードは次のようになります。
<a href=”https://www.quicksprout.com/2017/01/06/8-techniques-that-helped-me-improve-my-writing-during-ten-years-of-blogging/” target = ” _blank” rel =” noopener noreferrer”>毎日10年以上の執筆</a>
タグの最後にあるタイトルは、次のようにリンクを説明またはタイトル付けするものです。
貼り付けた画像0467
「ahref」タグはハイパーリンクを作成します。
1つの単語、フレーズ、または画像へのリンクを追加できます。
これにより、次のようなリンクが作成されます。30日でより優れたブログライターになる方法。そのリンクから、別のWebページに移動します。
貼り付けた画像0462
この場合、リンクをクリックすると、私が書いたガイドに移動します。このガイドは、わずか1か月でより優れたブログライターになるのに役立ちます。
アンカーテキストは、表示されるリンクの一部です。単語、フレーズ、または画像である可能性があります。
テキストリンクは次のようになります：<a href=”http://websitelink.com/” title =”リンクの説明”>
画像リンクは次のようになります：<img src =” http://websitelink.com/image.gif” alt =” Ball” /> </a>
リンクにいくつかの機能を追加することもできます。たとえば、リンクを新しいウィンドウまたはタブで開く場合は、次のようになります。
<a href=”http://www.websitelink.com” target =” _ blank” title =”このリンクは新しいウィンドウ/タブで開きます”>”リンクの説明” </a>
リンクが機能しない場合は、入力したURLが「http：//」で始まり、引用符を省略していないことを確認してください。また、中引用符ではなく、必ず一重引用符を使用してください。
貼り付けた画像0464
水平線は、テキストを分割するため、もう1つの便利な種類のタグです。
4.水平線
水平線は、コンテンツのさまざまな領域を分割するためにWebページを横切る線を作成します。次のようになります。
貼り付けた画像0457
<hr />タグを使用して、執筆のトピックの変更を示したり、コンテンツのさまざまなセクションを分割したり、特定のセクションを他のセクションよりも重要視したりできます。
線は通常、ページの左側から右側に伸びており、通常は明るい灰色です。次のようにサブコマンドに追加することで、行の幅を変更できます。
<hr width =” 40％”>
これは、width =”％”が追加された通常の水平線タグであり、幅を任意のパーセンテージに設定できます。 「hr」は「HorizontalReference」の略です。
これらの行は簡単に使いすぎてしまう可能性があることに注意してください。本当に必要な場合にのみ使用してください。少ないほうがいいですね。
ブロッククォートは、読みやすくするためにテキストをフォーマットするもう1つの方法です。
5.ブロッククォート
おそらく、以前にブログ投稿で誰かを引用または参照したことがあるでしょう。私は持っていることを知っています。
ご存知のように、引用を追加するときは、出典を引用することが重要です。
これは、次のようにHTMLでブロック引用符を使用して引用符を追加するためのパンチを詰め込んでいます。
貼り付けた画像0459
必要なのは、簡単な<blockquote>タグだけです。
次のようになります。
<blockquote>「ここにあなたの見積もりがあります。」 –引用を言った人</ blockquote>
コードは次のようになります。
貼り付けた画像0465
2つのコードを組み合わせることで、ブロッククォートへのリンクを追加できます。
ブロッククォートは視覚的に魅力的に見えるだけでなく、出典を引用することであなたの信頼性を次のレベルに引き上げます。
見出しタグは、知っておく必要のあるもう1つのHTMLタグです。
6.見出し
強力な見出しを作成するのは大変な作業です。
ただし、見出しは、読者のためにテキストのさまざまなセクションを分割します。
私はすべてのブログ投稿でそれらを使用しています。それらは記事を構成し、特定のトピックを探す場所を読者に示すのに役立ちます。
これが私のブログ投稿のヘッダーです。「Googleのトップ10にランクインするブログ投稿を書くための究極のガイド」です。
貼り付けた画像0476
ほとんどのサイトで使用できる6つの異なる見出しタグがあります：<h1>、<h2>、<h3>、<h4>、<h5>、および<h6>。
各数値が大きくなると、見出しは小さくなります。たとえば、h2の見出しはh4の見出しよりも大きくなります。
ただし、WordPressのテーマが異なれば、使用する見出しも異なる場合があります。
通常、ブログ投稿のタイトルにはh1と同じ大きさの見出しを使用します。小見出しは通常h2で構成されますが、「小見出し」は通常h3以下です。
貼り付けた画像0453
見出しを使用するときは階層を念頭に置き、スタイルの一貫性を保つようにしてください。
たとえば、見出しをh2にすることにした場合は、h3の見出しを使用してランダムなブログ投稿を作成しないでください。
見出しにもリンクを入れないでください。彼らは群衆の中で簡単に迷子になる可能性があります。見出しや小見出しではなく、文へのリンクのみを追加してください。
それでは、他の重要なフォーマットタグについて見ていきましょう。
7.フォントのフォーマット
太字、斜体、下線付きのテキスト行は、単語やフレーズを強調する簡単な方法です。
貼り付けた画像0466
太字と斜体のテキストの元のタグは<b>と<i>でしたが、セマンティックWebの動きにより、後でタグ<strong>と<em>を使用することがより一般的になりました。
テキストを太字にするには、<strong>「ここにテキストを入力してください」</strong>というコードを書きます。
イタリック体のテキストは次のようになります。「イタリック体のテキストは、特定の単語を<em>非常に強調します</em>。」
ただし、太字と斜体を組み合わせることはお勧めしません。
<u>コードを使用して、このようにテキストに下線を付けることもできます。これにより、太字または斜体のテキストと同じように、強調または即時性を追加できます。
貼り付けた画像0474
ただし、読者が下線付きのテキストをハイパーリンクと混同しやすいため、下線付きのテキストコードを使用する場合は注意が必要です。
改行タグを使用していない場合は、ブログの読みやすさが向上する可能性があります。その理由は次のとおりです。
8.改行
改行は、次のようにテキストの特定の行の間に単一のスペースを作成します。
貼り付けた画像0471
<br/>タグを使用して改行を追加できます。これらのタグは自己閉鎖型であり、作家は詩、レシピの書き方、住所の入力によく使用します。
改行コードは次のようになります。
「これは<br>
改行。」
改行を使用すると、ブログの投稿が読みやすくなります。
貼り付けた画像0469
どのテキストのグループをもっと読むのが好きでしたか？あなたはおそらく最初のものを好むでしょう？
これは、余分な空白が原因です。あなたの利点にそれを使用してください！
多くの人は空白は悪いと思いますが、実際には次のテキスト行に目を向け、断片をスキャン可能に保ちます。
要素を揃えることは、ブログ投稿の一貫性を保つためのもう1つの簡単な方法です。
9.要素を揃えます
画像を揃えようとすることほどイライラすることはありませんが、失敗するだけです。
オブジェクトを同期して配置すると、コンテンツははるかに洗練され、整理されたように見えます。
私はこのようなブログ投稿の特定の画像を中央に配置するのが好きです：
貼り付けた画像0468
特定の配置を指定するには、配置する画像またはテキスト行の前にタグ<p align =” center”>を追加し、その後に</p>を挿入します。
貼り付けた画像0461
同じことが、テキストまたはオブジェクトを左または右に整列する場合にも当てはまります。
これは、画像やテキスト行を揃えるのに苦労している場合に覚えておくと便利なタグです。ブログ投稿の本文にすばやく簡単に挿入できます。
結論
あらゆる種類のブログを運営している場合、またはブログの作成を計画している場合、コンテンツを希望どおりにカスタマイズするためにCMSに常に依存できるとは限りません。
これらの基本的なHTMLタグを使用すると、時間を大幅に節約できます。 HTML5は非常に人気がありますが、HTML5を使用するために、コーディングの天才やプロのWeb開発者である必要はありません。
WordPressでは、ビジュアルプレビューバージョンではなくHTMLバージョンを使用している場合、テキストエディタの読み込みがはるかに高速になります。
さらに、HTMLタグを手動で追加する方法を知っている場合は、手がキーボードから離れる必要はありません。あなたがすでに書き留めるのに忙しいなら、それは巨大です。
<ul>、<ol>、および<li>タグを使用してリストを作成し、さまざまなアイテムをリストします。箇条書きまたは番号付きリストのいずれかを作成できます。
<img>を追加すると、画像タグを使用して写真を挿入できます。 Webページに合わせて画像の高さと幅を手動で調整することもできます。
リンクタグは、hrefタグとも呼ばれ、ブログ投稿の本文にリンクを挿入するタグです。他のコンテンツにリンクすることができます。オンラインでの可視性を向上させるためにそれらが必要です。
<hr/>タグを使用して水平線を挿入できます。ただし、覚えておいてください。これらを使いすぎないように注意してください。
フォントを太字、斜体、または<strong>、<em>、<u>で下線を引くようにフォーマットします。テキストの本文をプロフェッショナルに見せるために、一度に1つずつ使用してください。
<br/>タグを使用して改行を入力します。これにより、ブログ投稿が読みやすくなります。
また、タグ<p align =” left、center、or right”>を使用して、Webページの左、中央、または右に表示されるように要素を整列します。
これらのHTMLタグを使用して、ブログ投稿を次のレベルに引き上げます。
そして、おそらくあなたがそれにいる間、いくらかの時間を節約するでしょう。
ブログ投稿で最もよく使用するHTMLタグはどれですか。
