HTMLの基礎

date_range 2024/04/09
日々の活動日記エンジニアインターン
HTMLとは


こんにちは！

京都開発研究所、Webプログラマーコースの長期インターン生、松木智哉です！！


フロントエンドに必要なHTMLとCSSについての学習を行いました。

HTMLについて軽くまとめたので、活動日記で記載したいと思います！！


HTML

HTMLとは、「Hyper Text Markup Language」のことで、WEBページを作成するための言語です。

HTMLの基本構造

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>タイトル</title>

</head>

<body>

    <h1>見出し1</h1>

    <p>段落のテキスト</p>

</body>

</html>


  • <!DOCTYPE html>：HTML文書のバージョンを指定しています
  • <html>：HTML全体を囲んでいます。
  • <head>：ページのへっだい情報を含んでいます。
  • <meta charset="UTF-8">：文字コードを指定するための要素で、通常はUTF-8を指定します！！
  • <title>：ページのタイトルを指定しています！！ブラウザのタブに表示されます！
  • <body>：ページの本文を含みます！ここにコンテンツを記述します！

HTMLのタグと種類と使い方


タグとは？

タグとは、「<」記号と「>」記号を用いて構成されるもの。

タグには開始タグ(<)と終了タグ(>)の２種類あります。

具体例

<h1>タグ(開始タグ)、</h1>(終了タグ)

要素とは？

要素とは開始タグと終了タグを用いて構成される全体を指します。

具体例

h1要素：<h1>見出し１</h1>

タグの種類

よく使うタグの種類をここでは記載します。

・h1~h6タグ
見出しを表すタグです。
<h1>が最も重要であり、数字が大きくなるほど重要度が下がります。検索エンジンやスクリーンリーダーなどがコンテンツの構造を理解する際に利用されます。

・aタグ
アンカー（リンク）を作成するタグです。
href属性にリンク先のURLを指定します。リンクにはテキストや画像などを指定することができます。

・ul / ol / li タグ 
リストを表すタグです。
<ul>は順序なしリスト (unordered list) を、<ol>は順序付きリスト (ordered list) を、<li>はリストアイテムを表します。

・imgタグ
画像を表示するタグです。
src属性に画像のURLを指定します。alt属性には画像の代替テキストを指定することができます。

・table / tr / th / td タグ
表を作成するためのタグです。
<table>は表全体を、<tr>は表の行を、<th>は表の見出しセルを、<td>は表のデータセルを表します。

・sectionタグ
文書のセクションを表すタグです。
セクションごとに意味のあるコンテンツをまとめる際に使用されます。

・articleタグ
独立したコンテンツを表すタグです。
ブログの記事やニュース記事など、単体で完結したコンテンツを表す際に使用されます。

・divタグ
コンテンツをグループ化するための汎用的なタグです。
スタイルやレイアウトの目的で使用されることが多いです。

・spanタグ
インライン要素にスタイルを適用するためのタグです。
テキストの一部にスタイルを適用したい場合に使用されます。

・header / nav / main / footerタグ
ページの構造を表すためのタグです。
<header>はページのヘッダー部分を、<nav>はナビゲーションを、<main>はメインコンテンツを、<footer>はフッター部分を表します。

HTMLのブロック要素とインライン要素

ここでは、ブロック要素とインライン要素の違いに着目して、それぞれの特徴を見ていきたいと思います！


  1. 表示方法

  • ブロック要素：独立したブロックを形成し、通常は上下左右の余白を持ち、ページの幅いっぱいを占めます。ブロック要素は常に新しい行から始まり、前後に改行が挿入される。

  • インライン要素：ブロック要素の内部に配置され、行内の一部として表示されます。インライン要素は要素の内容に応じて適切な幅を持ちますが、幅を指定することはできない。


  1. 配置可能なコンテンツ

  • ブロック要素：ほかのブロック要素やインライン要素を含むことができます！

  • インライン要素：ほかのブロック要素やテキストを含むことはできるが、ブロック要素を含むことはできない。


  1. スタイルの適用

  • ブロック要素：幅や高さなどのスタイルを指定することができます！

  • インライン要素：一部のスタイル (テキストの色や装飾など) は適応できるが、幅や高さなどのレイアウトに関するスタイルは適応できません！


  1. 具体例

  • ブロック要素：’<div>’、’<p>’、’<h1>’などです。

  • インライン要素 : '<span>’、’<a>’、’<strong>’などです。


HTMLを学習する上で他にもまだまだたくさん大事な要素はあります！！

まずは、ここで示したようなHTMLの基礎を固めて、HTMLの応用も学んでいきたいです！！


-----------------------------------------------

G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/

G!FIT公式Twitter：https://twitter.com/gfit_gdn

メンバー紹介ページ：https://guardian.jpn.com/member/tomoya_matsuki/




＊COMMENT＊

  • 下川　春樹

    下川　春樹

    更新日：2024-04-09 21:20

    ＊コメント＊

    お疲れ様です。
    知れば知るほど色んな要素やタグがあって面白いですよね。
    意外と基本的な事で分かってない事が多いので、しっかり理解していきましょー٩( 'ω' )و

    ＊コメント＊

  • 宮城　わか

    宮城　わか

    更新日：2024-04-10 09:25

    ＊コメント＊

    初めてHTMLを一から書いた時にはわからないことが多かったですが、今こういうふうにまとめてくださったものを見ると改めて難しいなと感じるとともに基本知識が身についていることが制作業務をしていく上で本当に大事だと思いました。

    ＊コメント＊

  • 奥村　優

    奥村　優

    更新日：2024-04-10 18:53

    ＊コメント＊

    お疲れ様です。
    自分もHTMLを学んである程度経ちますが、今だに知らないタグがたくさんあるのでとても勉強になります。お互い一緒に頑張っていきましょう！

    ＊コメント＊

＊コメント＊

＊ログイン＊

メールアドレス
パスワード
一覧へ戻る

NEW