すべてのWordPressユーザーが知っておく必要のある基本的なHTMLコード

公開: 2019-04-24

HTMLは、インターネット上のほとんどすべての基盤です。これはインターネットコンテンツを構築するための基礎であり、何十年も前から存在しています。 HTMLをしっかりと理解していないと、WordPressやその他のWebデザインや開発で行うすべてのことが妨げられてしまいます。幸運なことに、初心者からベテランまで、すべてのWordPressユーザーがほぼ毎日使用する基本的なHTMLコードがたくさんあります。それらを分解して、スピードを上げましょう。

私たちのYoutubeチャンネルを購読する

HTMLとは何ですか？

クイックバージョンは次のとおりです。HTMLはハイパーテキストマークアップ言語の略で、プログラミング言語ではないことを意味します。 HTMLは、スクリプトを介して処理を実行するようにコンピューターに指示しません。むしろ、それはあなたがあなたのページに持っているテキストを取り、それをマークアップします。イタリック、太字、配置、サイズなど。 HTMLには、画像やリンクを含める機能もあります。HTML5では、最新バージョンがそれらとテキストをエキサイティングな新しい方法で操作します。

HTMLコードはフラグ内に含まれており、非常に読みやすいです。単純なHTMLページは次のようになります。

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

ブラウザでレンダリングすると、次のようになります。

基本的なHTMLコード

ご覧のとおり、HTMLはそれほど混乱していません。実際、これまでHTMLコードを見たことがない場合でも、コンテキストだけでこれらのタグのそれぞれが何を意味するのかを理解できると思います。それが邪魔にならないように、Webでのキャリアを通じて使用する最も一般的で基本的なHTMLコードを見てみましょう。

大胆な

テキストを<strong>タグで囲むと、ブラウザにテキストを太字にするように指示します。単純に<b>を使用することもできますが、セマンティックコーディングを優先するGoogleやその他の検索エンジンを使用すると、 <strong>を使用した方が安全です。

You can make <strong>text bold</strong> by using this tag.

イタリック

<Em>は強調を表し、HTMLでイタリックを使用するセマンティックな方法です。 <i>を使用してこれを行うこともできます。

You can put <em>text in italics<em> by using this tag.

下線を引く

<u>と下線についても同じことが言えます。リンクには下線が引かれ、クリックできない下線付きのテキストはユーザーエクスペリエンスを低下させるため、一般的に、これはほとんど使用されません。

You can <u>underline</u> by using this tag.

見出し

おそらく、すべての基本的なHTMLコードの中で最も使用されているのは、さまざまな見出しです。 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>を使用して、コンテンツをセクションに分割します。

必ず階層順に使用してください。 Googleは見出しをネストすることを望んでいるので、 <h3>の下ではなく、 <h1>の下でのみ<h2>を使用するようにしてください。

ほとんどのページには<h1>が1つしかありませんが、Googleはそれ以上あることでペナルティを課すことはなくなりました。 <h1>を使用すると、ページ（または少なくともページのそのセクション）のネストがリセットされることに注意してください。

<h2>H2 is the most commonly used header tag.</h2>

このページのHTML要素のヘッダーはすべてh2です。

画像

画像の挿入は、HTMLが行う最も便利なことの1つです。それはインターネットをその残忍なスタイルから解き放ち、今日の場所への道へと導きました。必要なのは、必要な画像のURLを取得し、単一の<img src> （画像ソースタグを表す。次のように）を配置することだけです。

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

画像タグを閉じる必要はなく、画像を表示するために引用符は必要ないことに注意してください。多くの人々はまだコードをより読みやすくするためにそれらを使用しています。

<alt>属性は、アクセシビリティの目的で表示されるテキストであり、検索エンジンによってもインデックスが付けられます。スクリーンリーダーやその他のデバイスを使用している場合、インターネットを使用するには代替テキストが絶対に必要です。画像の代替テキストを用意することは、常にベストプラクティスです。

リンク

わかった。リンク。リンクには多くのことが起こっています。または、むしろ、リンクを使用して実行できることがたくさんあります。最も基本的には、 <ahref>タグを付けてまとめます。 <a>はそれがリンクであることを示し、 <href>は文字通りリンク先へのハイパーテキスト参照（URL）です。

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

</a>だけでリンクコードを閉じ、その間に任意のテキストを使用できます。これはクリック可能なリンク自体であり、アンカーテキストと呼ばれます。

次のようにページに表示されます。Diviページへのリンク。これがアンカーテキストです。

さらに、HTMLコードをネストすることもできます。リンクフラグの間に<imgsrc>タグを挿入すると、画像をクリック可能にすることができます。

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

クリック可能な画像リンクがどのようにレンダリングされるかをここで確認できます。

画像のホットリンク用の基本的なHTMLコード

その他のリンク属性

また、リンクにかなりの数の異なる属性を含めて、特定の方法で動作するようにすることもできます（URLをリファラーとして非表示にしたり、新しいウィンドウでリンクを開いたりするなど）。あなたにとって最も役立つもののいくつかは

relは、リンクとそのターゲットのある種の関係を示します。紹介トラフィックがあなたにさかのぼることを防ぐためのnoreferrerなど。
targetは、リンクを開く場所をブラウザに指示します。たとえば、 _blankは空白のタブでリンクを開きます。
nofollowはrelと連携して、リンクジュースをターゲットサイトに渡したくないことを検索エンジンに通知します。これは、物議を醸すコンテンツなどにリンクする場合に適しています。また、コメント内のリンクをスパムするのを防ぎ、露出とクリックスルー以外の機能にボーナスを提供しないため、コンテンツが公平であると見なされるようにします。

もっとたくさんありますが、それらはおそらくあなたが最も頻繁に見るものです。

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

取り消し線のテキスト

あなたが私のようなら、時々あなたは必要打ちのめされた言葉を使って冗談を言いたい。あるいは、リストから物事をマークする必要があるかもしれません（またはコード自体が言うように削除する必要があります）。または、テキストを介して行を実行する必要があるその他のもの。

取り消し線を引くテキストの前後に<del>を使用する場合です。一部の人々にとって、これは信じられないほど一般的なコードですが、他の人々は決してそれを使用しないかもしれません。とにかく、覚えやすいです。

You can use <del>this code</del> for strikethrough text in HTML.

基本的なHTMLコードで作成できるリストは2種類あります。 1、2、3などの番号が付けられた順序付きリスト。 順序付けされていないリストでは、数字の代わりに箇条書きまたは記号（サイトのデザインによって異なります）を使用します。

順序付けされていないリストまたは順序付けられたリストの場合は、各リストをそれぞれ<ul>または<ol>でラップします。また、リストの各項目は<li>で囲む必要があります。

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

そして、これらのコードは、違いを示すために次のようにレンダリングされます。

これは順序付けられていないリストの一部です。
これもそうです。

そして、これが順序付きリストを設定する方法です。
これはリスト内のリンクです。
そして、このリンクテキストは太字ですが、この部分は太字ではありません。

リスト内の他のコードをネストすることもできます。したがって、テキストを太字にしたり、リンクを挿入したりすることができます。

見積もりをブロックする

WordPressのキャリアのある時点で、他の人のWebサイトを引用する必要があります。そこで<blockquote>が登場します。コピー/貼り付け（および属性）するテキストを<blockquote>の開始タグと終了タグで囲むだけで、準備は完了です。

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

これは、ページ上でどのように表示されるかです。

このテキストは、引用であることを示すために特別なスタイルで表示されます。

段落

段落HTMLはちょっと変です。使用しているCMSとビルダーによっては、各改行が個別の段落として自動的にレンダリングされる場合があります。 WordPressは、HTMLを入力するときにこれを行います。ただし、すべてがそれを行うわけではありません。したがって、段落を分離してテキストの壁を持たないようにする必要がある場合は、各段落を<p>で囲みます。ブラウザは、テキストの各ブロックを1つの連続したブロックではなく、個別の段落として表示することを認識します。デフォルトでは、ブラウザは特に指示がない限り改行を無視します。

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

行と改行

段落とセクションの間に他の区切りが必要な場合があります。そのとき、 <hr>タグと<br/>タグを使用できます。

<hr>は、どこにでも区切り線を挿入します。多くの人がこれを使用して、Webページのサイドバーまたは主要セクションのウィジェットを分離します。

<br/>タグは改行です。 <p>の途中で<br/>を使用すると、新しい段落に入らずに行を分割できます（ブロックのスタイル設定と編成のため）。 <br/>は自動終了タグです。つまり、その中にコンテンツを含めることはできません。これは、コードの最後にあるスラッシュで示されています。

これを使用して、テキストや段落を分割したい場所に挿入することで分割できますが、これは良い習慣ではありません。HTML、CSS、JavaScriptを使いこなすにつれて、段落をターゲットにする必要があります。特定のことを行うための要素。この違いについて詳しくは、こちらをご覧ください。

まとめ

HTMLは、インターネットと対話するために絶対に必要です。 Webの開発と設計を始めたばかりでも、JavaScriptが登場する前のベテランでも、誰もが同じようにそれらを使用します。現在も基本的なHTMLコードを使用して、すべてのサイトの基盤を実行しています。サイトがどれほど豪華であろうと、その機能がどれほど高度であろうと、リンクが途切れたり、太字であってはならない場合でも、 <ahref >または<strong>タグが大丈夫です。

最近最もよく使われている基本的なHTMLコードは何ですか？

enterlinedesign /shutterstock.comによる記事特集画像