@Balangkanをフォローするには、上記の青いテキストをクリックしてください。

これはバロンズ誌の第42回の記事です。

著者 |バラン編集者 |バラン

出典 |バランカン (ID:balangk)

転載許可については、当社までご連絡ください（WeChat ID: g0013g）。

序文

SEOを始める際には、SEOに関連するHTMLの概念を理解することが不可欠です。これは非常に重要です。学習を進めていくうちに、HTMLを学ぶことの重要性を自然に理解できるようになります。

本日、Balang SEOはHTMLの基礎を学んでいただくため、HTMLの基礎チュートリアルを録画しました。HTMLは謎めいたものではなく、とても楽しいものです。楽しく学んでください！

ハイパーテキスト マークアップ言語(HTML)は、Web ブラウザーで表示できる Web ページやその他の情報を作成するために設計されたマークアップ言語です。

これは多くのSEO実践者、SEOマネージャー、そして一部の人材紹介会社でさえも混同しがちな点です。プログラミング言語は、最初から最後までロジックと機能性を重視します。一方、HTMLは仕様を重視しており、これは人間社会における世界共通語に相当します。

フランス人と中国人は同じ言語を話さなければどうやってコミュニケーションできるのでしょうか?

はい！これは世界的に使われている公用語、英語を使っています！つまり、ここでは英語をHTMLとして考えることができます。

人間の目がウェブページ上で見る情報はウェブページ上で提示される必要がありますが、ウェブページ自体は中国語、フランス語、英語、日本語、スペイン語などの言語を認識しません。

人間はウェブページで自分の考えを伝えたいと考えており、ウェブページが人間の考えを表現できることを望んでいます。では、どうすれば良いのでしょうか？HTMLはまさにこの目的のために作られました。

つまり、HTMLは世界的に認められた公用語、つまり英語として機能しているのです！これにより、人々はWebページを使って効率的にコミュニケーションをとることができるのです。

HTMLは、見出し、段落、リストなどの情報を構造化するために使用され、文書の外観や意味をある程度記述するためにも使用できます。現在、HTMLは広く使用されており、代替となるものはありません。

HTML の初期の開発は、もともとTim Berners-Lee (World Wide Web の発明者) によって定義されました。彼は、ハイパーテキストの概念をコンピュータ ネットワーク アプリケーションの分野に初めて導入した人物です。

ワールドワイドウェブの発明者、ティム・バーナーズ＝リー。

彼は、その後のHTML構造の改良と発展に指針と模範的な考え方を提供しました。そのため、これはハイパーテキストと呼ばれ、ハイパーテキストの起源となっています。

HTML 技術の特許を世界中で独占し、人類史上最も裕福な人物、おそらくは前例のない、比類のない人物になる可能性もあったこの人物に敬意を表します。

しかし、コンピュータ科学者であり学者でもあった彼は、生涯を通じてWWWに情熱を注ぎ、それを人類に自由に公開することを決意しました。この寛大さと広い視野は、一般の人々の理解をはるかに超えており、彼を紛れもなくWWWの父と称えています。

HTMLは、 IETF （Internet Engineering Task Force、国際的なインターネット技術組織）によって、簡略化されたSGML （Standard Generalized Markup Language）構文を使用して開発されました。その後、継続的に改良され、最終的にはWorld Wide Web Consortium（W3C）によって維持管理される国際標準となりました。

1999年のHTML4のリリース以来、HTMLはアップグレードの必要がないと多くの人が考えていました。しかし、2007年にW3CはHTML5プロジェクトを開始しました。8年間の開発期間を経て、新しい仕様は2014年10月にようやく完成しました。西洋人が人類にもたらした技術的貢献は計り知れず、消えることのないものです。専門家はこれらの組織や個人に敬意を表すべきです。

HTMLの構造というよりは、構文として説明する方が正確です。HTMLは多くの要素で構成されているため、言語と呼ばれます。個々の要素はタグ、あるいはSEO業界ではマークと呼ばれます。マークの機能は、ブラウザにこれがプレーンテキストではなくHTMLテキストマークアップであることを伝えることです。

要素Aを例に挙げると

HTML構文では、 `<a>`要素は`<a>`要素と呼ばれますが、SEO業界ではハイパーリンクタグと呼ばれます。発音は「<a>タグ」です。

A要素の構文

< a href = "http://www.8alang.com" title = "巴郎" target = "_blank" rel = "external nofollow" >巴郎 a >

この完全なコード文字列のみが要素Aと呼ぶことができ、分割することはできません。要素とタグは全く異なる概念です。研究者はこれらを混同してはなりません。

要素パラメータの説明

`<a>`タグは二重タグなので、ペアで出現する必要があります。そうでない場合、構文エラーが発生します。

href はHypertext Reference の略で、ハイパーリンクのターゲットの URL を指定することを意味します。

href 属性の値には、フラグメント識別子や JavaScript コード スニペットなど、有効なドキュメントの相対 URL または絶対 URLを指定できます(WWW では、情報リソースの一意のアドレスは URL と呼ばれます)。

タイトルは記事の名前です。キーワードにマウスを合わせると、テキストが表示されます。

ターゲットは開く方法で、新しいウィンドウ、既存のウィンドウ、または親ウィンドウ内のウィンドウになります。

relは relation の略語で、相関、関連性、伝達を意味します。

SEO業界では、これは検索エンジンスパイダーにリンクの関連性を追跡するかどうかを伝えるために使用されます。一般的には、ウェブサイトのオーソリティを継承したくないURLをブロックし、そのURLに「nofollow」を追加します。相互リンクを交換する場合は、この部分を頻繁に確認する必要があります。

もちろん、ブラックハット技術によってコードを隠したり、スパイダーをハイジャックしたりすることは可能ですが、これについてはここでは説明しません。しかし、それでも悪意のある人物が存在することは知っておく必要があります。

上記は要素Aの紹介です。SEOに関連する要素は他にも数多くありますが、いずれも仕様が確立されており、固定されています。これらの仕様は国際標準に基づいているため、従うだけで十分です。

つまり、HTMLは全く謎めいたものではなく、むしろとても楽しいのです。数学、物理学、化学、歴史、地理、政治学などと比べると、はるかに興味深いものです。言語やコードについて聞いたからといって、難しいと思い込まないでください。

HTMLは非常に興味深く、美的にも美しいテーマですが、長年の蓄積が必要です。HTMLにはSEO関連の要素が他にもたくさんありますが、スペースの都合上、読者の皆様にはご自身で調べてみることをお勧めします。

上記の例は要素 A です。では、SEO と交差する HTML 要素とタグにはどのようなものがあるでしょうか?

Div要素、Span要素、A要素、P要素、UL要素、imgタグ、hタグ、altタグ、strongタグ、nofollpwタグなどが一般的に使用されます。

これらの要素とタグを習得し、それらを使ってコーディングできるようになる必要があります。難しいことではありません。練習すれば習得できます。それぞれのタグの使い方を自分で学んでください。

何かを知っていて、それを学んだからといって、それができるようになるわけではありません。手で入力しなければなりません。知っていることと、習得すること、つまり実行することの間には隔たりがあります。

インターネットの発展により、情報へのアクセスは驚くほど便利かつ迅速になりました。Bilibili、NetEase Cloud Classroom、MOOCなどのプラットフォームを利用したり、トレーニングコースに参加したりすることで、独学でスキルを向上させることができます。

情報過多の現代社会において、最良の学習法は、体系的で質の高いチュートリアルを見つけ、それを徹底的に、そして完璧に学ぶことです。今日は断片的にざっと目を通し、明日は興味のある分野に少し手を出すだけではダメです。そんなやり方では、どんな分野も十分に習得できません。

バロンは勉強に関するアドバイスをくれました。

1.完全かつ体系的なチュートリアルを見つけます。

2.毎日 1 つのレッスンを学習し、重要なポイントを 1 つ記録します。

3.レッスンを学習したら、実際に手入力してみましょう。遅すぎる場合は、繰り返し練習しましょう。学習能力に自信のある人でも、繰り返し練習する必要があります。合格基準は、目を閉じて、頭の中に完全な枠組みができて、すぐに入力できるようになるまで練習することです。それができて初めて、次のレッスンに進むことができます。

4.より美しい Web ページを見て、コードを調べ、フレームワークのレイアウト、配色、機能的なエクスペリエンスについて考えます。

5.ある程度の基礎（HTML と CSS を使用して独自に Web ページを作成する能力）を身に付けたら、関連する Web フロントエンド開発サークルに参加し、プログラマーが何を議論しているかを確認し、最新の業界動向を理解します。

6. HTMLをゲームのように扱い、遊びながら学ぶ喜びを体験しましょう。これが西洋教育の核心です。この考え方を身につけ、「中国の試験重視の教育」という学習スタイルを捨て去りましょう。

7.興味は最高の教師です。努力を続ければ、日々知識が蓄積されます。一攫千金を狙うようなことはやめましょう。人生は短くもあり長くもあります。だからこそ、最大限に活用しましょう。楽しみながら学びましょう。

Balangビデオチュートリアル

再生時間: 34:03

バロンの実践演習: 13:20-29:27

バロンからのヒント:理論的な知識が役に立たない、または忍耐力が足りないと感じた場合は、13:20 ～ 29:27 に早送りして視聴を開始してください。

チュートリアルコード

 < html > < head > < meta charset = "UTF-8" > < title >巴郎的自我介绍 title > < meta name = "keywords" content = "巴郎,巴郎简介" /> < meta name = "description" content = "这是巴郎的自我简介，欢迎你来到巴郎小站。" />  head > < body > < h1 >巴郎自我介绍 h1 >皆さん、 < h1 >巴郎自我介绍 h1 > 。Balangです。Balangのウェブサイトへ< p > 大家好，我是巴郎，欢迎你来来到巴郎小站，这是我的自我介绍. 很高兴认识你，相识即是缘分，来了就好好学，关注公众号巴郎刊：巴郎刊，学习更多SEO知识。  p > < h2 > SEO学习 h2 > < p > SEO学习，专注SEO领域学习与探讨-巴郎SEO < br /> 我巴郎，爱好SEO，互联网，做片子，写文章，一个佛系90后中年大叔< br /> < img src = "bala.jpg" alt = "巴郎SEO图片" /> < a href = "http://www.8alang.com" rel = "external nofollow" >巴郎小站 a >  p >  body >  html >

マインドマップ

@Balang Magazine: Balangが実践的なコーディング練習をガイドします

最後に

SEO 業界全体が批判されていますが、参入障壁が低く、教育や経歴も必要ないため、この業界の実践者の 99% が 100% の責任を負っています。

そのため、多くの初心者はSEOの間違った道に迷い、ブラックハットテクニックや手っ取り早い金儲けにばかり目を向け、近視眼的な手法を繰り返してしまいます。金儲けは悪いことではありませんし、私たちもそれを奨励していますが、手法やアプローチには必ず基準と限界があります。

多くの専門家は、HTMLはSEO業界にとって重要ではなく無関係だと考えています。これは偏狭で時代遅れの考え方であり、絶対に避けるべきです。

興味は最高の教師です。興味を習得し、プロフェッショナルになり、自立したスキルを身につければ、富は自然とついてきます。あなたが開花すれば、幸運が舞い込んできます。本日のSEOチュートリアル「Baronが教える基本HTML」はこれでおしまいです。それでは次回！

面白い人になってください、バランさん、さようなら！

著者: バラン

初出：バラン駅

バラン駅: http://www.8alang.com/