初心者向け基本的なHTMLの書き方

HTML

HTMLは、ウェブページを構築するための基本的な言語です。この記事では、HTMLの基本的な書き方と表示法について解説します。HTMLを学びたい初心者の方にとって、有益な情報が詰まっていますので、ぜひお付き合いください。

基本のHTML構造

HTML文書は以下の基本的な構造を持っています。

<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>見出し1</h1>
    <p>これは段落です。</p>
</body>
</html>
  • <!DOCTYPE html>: 文書がHTML5で書かれていることを示す宣言です。
  • <html>: HTML文書のルート要素を定義します。
  • <head>: ページのメタ情報や外部リソースへのリンクを含むセクションです。
  • <title>: ページのタイトルを指定します(ブラウザのタブに表示されます)。
  • <body>: ページのコンテンツが含まれる部分です。テキストや画像、リンクなどがここに入ります。

上記で紹介したものは、必ずと使用することになるので「HTMLのお約束」だと思って覚えておきましょう。

ちなみにVsCodeを使っていれば “!” 入力後、Tabキーで基本的なHTMLのひな型を生成してくるので使ってみてください。まだ、ダウンロードしていない人は下記のリンクから。

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

要素とタグ

要素とは、HTMLを構成する一つひとつのパーツのことを言います。現在HTMLには100を超える要素があり、それぞれに意味があります。

HTMLでは、要素をタグで囲む形式で記述します。例えば、<h1>は見出し1を、<p>は段落を表すタグです。タグは通常開始タグと終了タグの組み合わせで表され、要素の内容を囲みます。

<h2>見出し2</h2>
<p>これは別の段落です。</p>

画像の挿入

画像を挿入するには、<img>タグを使用します。

src属性のあとに画像のある場所のURLやパスを入力しましょう。

<img src="画像のURL" alt="代替テキスト">
  • src: 画像ファイルのURLやパスを指定します。
  • alt: 画像が読み込まれない場合やスクリーンリーダーのために表示される代替テキストを指定します。

リンクの作成

別のページへのリンクを作成するには、<a>タグを使用します。

<a href>の形で、href属性と一緒に使われることが一般的です。href属性にはリンク先のURLやパスを記入しましょう。

<a href="リンク先のURL">リンクテキスト</a>
  • href: リンク先のURLやパスを指定します。
  • リンクテキスト: リンクとして表示されるテキストを指定します。

まとめ

この記事では、HTMLの基本的な書き方と表示法について説明しました。HTMLはウェブページ作成の基盤となる言語であり、これをマスターすることはウェブ開発の一歩を踏み出すための大切なステップです。最初は難しいかもしれませんが、継続して学習すれば必ず身に付くので頑張っていきましょう。

「読んだだけでは100%身に付きません」

必ず行動に移してください。

そう言っても、

行動する人は20%

それを継続する人は5%

行動し続けるだけで、

上位5%に入ることができます。

今すぐ行動して上位5%に入り、


Web制作で本気で人生変えたい

そんな人は今すぐ登録してください

今行動しなきゃ、人生変わらないですよ

こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています!

是非登録してみて下さい!

コメント

タイトルとURLをコピーしました