HTMLはインターネット上のほとんどすべての基礎です。 これは、インターネットコンテンツが構築されている礎石であり、それは何十年もされています。 HTMLをしっかり理解していなければ、WordPressやその他のwebデザインや開発で行うことはすべて妨げられます。 あなたのために幸運なことに、初心者からベテランまでのすべてのWordPressユーザーが日常的に使用する基本的なHTMLコードがたくさんあります。 のは、それらを打破し、速度にあなたを取得してみましょう。
私たちのYoutubeチャンネルを購読
HTMLとは何ですか？
クイックバージョンは次のとおりです。HTMLはhypertext markup languageの略です。 HTMLは、スクリプトを介して物事を実行するようにコンピュータに命じることはありません。 むしろ、それはあなたがあなたのページに持っているテキストを取り、それをマークアップします。 斜体、太字、配置、サイズなど。 HTMLはまた、あなたの画像やリンクを含める機能を提供し、HTML5では、最新バージョンは、エキサイティングな新しい方法でそれらとテキストを操作します。
HTMLコードはフラグ内に含まれており、非常に読みやすいです。 単純なHTMLページは次のようになります:
ブラウザでレンダリングすると、次のようになります:
ご覧のとおり、HTMLはそれほど混乱していません。 実際には、あなたが前に任意のHTMLコードを見たことがない場合でも、私はあなたがこれらのタグのそれぞれがちょうど文脈によって何を意味するか その方法のうち、のは、あなたがウェブ上であなたのキャリアを通して使用します最も一般的な、基本的なHTMLコードを見てみましょう。
Bold
テキストを<strong>タグでラップすると、ブラウザにテキストを太字にするように指示しています。 単純に<b>を使用することもできますが、googleや他の検索エンジンではセマンティックコーディングを優先しているため、<strongを使用する方が安全です>
You can make <strong>text bold</strong> by using this tag.
Italics
<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.
見出し
必ず階層順に使用してください。 Googleは見出しをネストすることを望んでいるので、<h2>を<h1>の下にのみ使用し、<h3>の下には使用しないようにしてください。
ほとんどのページは単一の<h1>しかありませんが、Googleはもはやそれ以上を持っているためにあなたを罰することはありません。 <h1>を使用すると、ページ（または少なくともページのそのセクション）のネストがリセットされることに注意してください。
<h2>H2 is the most commonly used header tag.</h2>
このページのHTML要素のすべてのヘッダーはh2です。
画像
画像を挿入することは、HTMLが行う最も有用なものの一つです。 それはbrutalist様式からそしてそれが今日あるところに道にインターネットを壊した。 あなたがする必要があるのは、あなたが望む画像のURLを持っていて、単一の<img src>（画像ソースタグのために立っています。 このように:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
画像タグを閉じる必要はなく、画像を表示するために引用符は必要ありません。 多くの人がコードを読みやすくするためにそれらを使用しています。
<alt>属性は、アクセシビリティのために表示されるテキストであり、検索エンジンによっても索引付けされます。 スクリーンリーダーやその他のデバイスを持つ人々のために、altテキストは、インターネットを使用するために絶対に必要です。 画像の代替テキストを使用することをお勧めします。
リンク。 たくさんのリンクが起こっています。 または、むしろ、あなたがリンクでできることがたくさんあります。 最も基本的には、<a href>タグと一緒に配置します。 <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コードもネストできます。 リンクフラグの間に<img src>タグを挿入することで、画像をクリック可能にすることができます。
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
クリック可能な画像リンクがここでどのようにレンダリングされるかを見ることができます:
その他のリンク属性
リンクにはかなりの数の異なる属性を含めることもできます。 あなたにとって最も有用なものは、
- relリンクとそのターゲットの何らかの関係を示します。 このようなあなたに戻ってトレースされている紹介トラフィックを防ぐためにnoreferrerなど。
- ターゲットは、リンクを開く場所をブラウザに指示します: _Blankは、たとえば、空白のタブで開きます。
- nofollowはrelと一緒になり、ターゲットサイトへのリンクジュースを渡したくないことを検索エンジンに伝えます。 これは、議論の余地のあるコンテンツなどにリンクする場合に適しています。 それはまたあなたのコメントでリンクをスパムからの人々を保ち、露出及びclickthroughs以外特色にされることにボーナスを提供していないのであなたの内容が公平と見ることができるようにそれを作る。
もっとありますが、それらはおそらく最も頻繁に表示されるものです。
取り消し線テキスト
あなたが私のようなものなら、時にはあなたは被災した言葉を使って冗談を作りたい必要があります。 または、リストから物事をマークする必要があるかもしれません（または、コード自体が言うように削除する必要があります）。 または、テキストを介して行を実行する必要がある他のもの。
それはあなたが打つしたいテキストの周りに<del>を使用するときです。 一部の人にとっては、これは信じられないほど一般的なコードですが、他の人はそれを使用しないかもしれません。 それにもかかわらず、それは覚えやすいものです。
You can use <del>this code</del> for strikethrough text in HTML.
リスト
リストは、これらの日のwebコンテンツの別の主要な部分です。 彼らはあなたに空白のトンを与え、テキストの壁を分割するだけでなく、あなたの考えを消化可能な部分に整理することもできます。
基本的なHTMLコードで作成できるリストには二つの種類があります。 1、2、3などの番号が付けられた順序付けられたリスト。 順序付けされていないリストは、数字の代わりに箇条書きまたは記号（サイトのデザインに応じて）を使用します。
順序付けられていないリストまたは順序付けられたリストの場合、それぞれ<ul>または<ol>のいずれかで各リストをラップします。 そして、リスト上の各項目は<li>でラップする必要があります。
そして、これらのコードは違いを示すためにこのようにレンダリングします:
- これは順序付けされていないリストの一部です。
- だからこれだ。
- そして、これはあなたが順序付きリストを設定する方法です。
- これはリスト内のリンクです。
- このリンクテキストは太字ですが、この部分は太字ではありません.
また、あまりにも、リスト内の他のコードをネストすることができます。 したがって、太字のテキスト、リンクの挿入などができます。
引用ブロック
WordPressのキャリアのある時点で、他の人のウェブサイトを引用する必要があります。 それが<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/>タグは改行です。 <br/>を使用すると、<p>の中央にある<br/>を使用して、新しい段落に入らずに行を分割することができます（ブロックのスタイル設定と組織のため）。 <br/>は自己終了タグであり、コンテンツがその中に含まれていないことを意味します。 これは、コードの最後にあるスラッシュで示されます。
テキストと段落を分割したい場所に挿入することで分割することができますが、それは良い習慣ではなく、HTMLとCSSとJavaScriptをより高度にするには、paragraph要素 あなたはここで区別についての詳細を読むことができます。
HTMLをラップアップすることは、インターネットと対話するために絶対に必要です。 Web開発やデザインを始めている人でも、JavaScriptが登場する前の経験者でも、誰もが同じ方法でそれらを使用しています。 私たちはまだすべてのサイトの基盤を実行するために基本的なHTMLコードを使用しています。 サイトがどれほど派手であっても、その機能がどれほど高度であっても、リンクが壊れたり、大胆であってはならないものがある場合、<a href>または<strong>タグが正常に機能しているかどうかを調べるために掘り下げることになります。
最近、最も使用されている基本的なHTMLコードは何ですか？
enterlinedesign/.comによる記事特集画像