2020年4月26日

HTMLタグの基本と、その活用法

今やインターネットはビジネスの世界でも一般的になってきました。
フリーランスでネットビジネスをやっている人も年々増えてきていますが、インターネットでビジネスを始めるためには、少なくとも、ネットに関する知識を修得しておく必要があります。
特に個人でホ-ムページを立ち上げたり、ブログをやっている人は、HTHLの知識をある程度理解しておきたいものです。
そのために、HTMLタグの基本や、その活用法について書いてみました。

HTMLタグとは

「HTML」とは「Hyper Text Markup Language」が略された言葉で、Webページを作るための基礎言語、すなわりマークアップ言語のことを意味しています。
マークアップ言にもいくつかの言語がありますが、HTMLは「タグ」でホームページやブログの文書の見出し、段落、他文書へのリンク、画像表示などを指定することができます。
簡単に言うと、ある文書がHTML文書であることを指定するものが「HTMLタグ」となってきます。

世の中には、視覚的な表現をしたり、文章構造を記述するタグがありますが、プログラミング言語などを入れると、実に数多くの種類がありますが、Webの世界は、このHTMLが主流です。

タグを使用することで、HTMLで記述された文章がブラウザを通してホームページやブログという形で見ることができるのです。

HTMLタグの役目

HTMLでサイトを構成する場合、タグを使うことで、見出や段落、リストを形作ることができます。言いかけると、HTMLタグによって、HTMLの記述を開始したり、終了することをできるわけです。

HTMLタグの書き方

では、具体的にHTMLタグはどのような書き方をするでしょうか?
タグは、HTMLの構造を作成するための指示であり、HTMLではタグを使うことで、見出し作成、文字フォント、色を変えたり、画像表示させていきます。

具体的には、「<」と「>」で囲んだ半角英数でタグが成立します、
基本的に開始タグ<>、終了タグのセットで構成されており、終了タグは終了を表す「/(スラッシュ)」が付けられています。
但し、タグは半角表示が必須なので、全角だと正しく表示されません。
尚、大文字、小文字のどちらで書いても問題はないものの、小文字で入力するのが主流です。

タグの種類

見出し

これは見出しタグで、半角英字のhは「header」を意味しており、hの後の数字で見出し順序、文字フォントを指定していきます。

 タイトル 

これはタイトルタグでタイトルを指定。

  • 箇条書き

箇条書きを指定するタグ

要素
HTMLは、入れ子の形で構成していきますが、入れ子構造そのものもタグで指定していくことになります。
このタグで指定する入れ子構造を「要素」と呼んでおり、html要素の枠内でhead要素やbody要素の枠が入ります。
head要素内には、文章タイトルのtitle要素が入り、body要素内には文章見出しのh要素、段落指定のp要素、箇条書きのul要素が入ることになります。
このように要素を指定することで、HTML構造を作っていきます。

属性
属性の機能を使うことで特定の指示を指定することができます。
例えば、

 サンプル 

というようにCSSを直接記述することが出来ます。

HTMLタグの使い方

では、ここで、HTMLタグの使い方を見て行くことにします。

<strong>・hレベル:見出し
見出しは6段階で見出しを表現できます。
基準は4で最大見出しが1、最小見出しが6となってきます。
前後にスペースが生まれ、太字見出しとして表示されます。

具体的な記述は

表示の仕方

と書いていきます。
すると、見出しを表現することができます。

a:アンカー
アンカーはhref属性を使いながらリンク先を指定することで、他ページにリンクしていくことができる機能です。
リンクさせたいサイトURLを「href=”URL”」という形で表記していきます。
トップページにリンクさせたい場合は、   

トップページ

と記述します。

div:範囲指定(ブロック要素)
div:範囲指定は、ブロック要素を指定したり、スタイルシート適用に使うタグです。
また、前後の改行で改行タグであるの代替としても使うことが可能です。
具体的には

と表記することで、CSSを使ったスタイル変更ができるようになります。

作成支援ソフトを使ってみる

HTMLで記述するためには、インターネットを閲覧するために必要なブラウザとメモ帳でも可能です。
しかし、作成支援ソフトを活用すると、タグの言語や入れ子構造を意識せずとも、HTML構成を作り上げることが可能です。
支援ソフトはフリーのものありますが、それでもかなり使いやすいソフトとなっていますので、利用してみることの1つの方法です。

以上、HTMLタグの基本と、その活用法でした。