HTML

【初心者向け】HTMLの基本的なタグの使い方

投稿日:2019年4月6日 更新日:

今回はHTMLの基本的なタグの使い方を解説していきます!

前提条件

  • HTMLの環境構築が済んでいること
  • 「HTMLはタグを使って書く。」の意味が分かる

HTMLの環境構築が済んでいない方はまずこちらの記事を読んでください。

「HTMLはタグを使って書く。」の意味が分からない人はこちらの記事を読んでください。

タグの種類

HTMLには基本構造があることは解説しました。

例えば、

このように

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>
  • <body>

などのタグがあります。
これらはHTMLを書く時に必要なテンプレートのようなもので、<body>タグの中身は書きたいものによって大きく変わります。

bodyの中身はどのように書くのがよいのでしょうか?

それでは今からbodyの中でよく使うタグを見ていきましょう!

 

<h1>~<h6>

役割:見出しを作る

例えばこんな感じ。

コードは以下の通り

 

<p>

役割:段落を作る。

例えばこんな感じ。

 

<img>

役割:画像を貼り付ける。

例えばこんな感じ。

<img>は終了タグはいりません。

srcでどの画像を使うのかを指定します。

 

<a>

役割:リンクを作る

例えば下のようにクリックできる。

Google

自分で書いてみるならこんな感じ

ここで解説してますね。

 

<ul>, <ol>, <li>

役割:箇条書きができる。

例えば、<ul>だとこんな感じ。

 

<ol>だとこんな感じ。

このように箇条書きができるタグがあります。

つまり、

  • ul → unordered list
  • ol → ordered list 

の略です。

 

<!– –>

役割:ブラウザ上に表示されなくなる

こんな感じ。

「ここはコメントアウト」の文字が表示されていないことが分かります。

このようにコード内にメモ書きができるようになります。

メモ書きをすることで、あとからコードを見直すときや他人が自分のコードを読む時などにわかりやすくなります。

 

まとめ

いかがでしたか?

今回はHTMLでよく使うタグなどについて解説しました!

始めてみる方は覚えきれないと思うので、こんなのがあるんだなくらいに思っていただいて結構です。

今回紹介したタグ

  • <h1>~<h6>
  • <p>
  • <img>
  • <a>
  • <ul>,<ol>,<li>
  • <!– –>

次のステップ

-HTML
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【初心者向け】HTMLの基礎知識【入門】

入門編ではHTMLがどのようなものか概要を解説しました。 今回はHTMLを書くにあたっての基礎知識をご紹介します。 入門編をまだご覧になっていない方はこちらからどうぞ 自分でHTMLを書きながら学習を …

誰でも分かる!HTMLの環境構築方法

今回はプログラミング経験ゼロの方でも分かる、HTMLの環境構築を解説していきます! 「そもそもプログラミングでやりたい事が決まってない…」 という方はまず「プログラミング初心者が最初にやる …

【初心者向け】HTMLとは?【入門】

­プログラミングを始めてやる方やホームページを作りたい方がまず目にするのが「HTML」だと思います。 しかし、 「そもそも、HTMLって何?なにができるの?」「ちょっと使ってみたけど、なんだかよくわか …