HTML  for Dummies

HTML for Dummies

What is HTML?

HTML or Hyper Text Markup Language is a markup language used to define the structure of a web page. Think of it as a blue print for any product you want to design. It basically acts as the skeleton of the web page.

Basic Structure of an HTML boilerplate Code

Basic HTML Tags

Heading: Helps to organize content and ranges from <h1> to <h6> in decreasing order of heading size.

<h1>Large</h1>
<h2>medium</h2>
<h3>Small</h3>

Paragraph: It is denoted by <p> and is used to add text content in the website.

<p>This is a paragraph.</p>

Anchor tag: Use to add links to external website or resources and denoted by <a>.

<a href="https://www.google.com">Visit google</a>

Images: It is use to embed images on website. The “alt” attribute is use to display alternate text if image is not available. Similar to image you can also add Videos.

<img src="image1.png" alt="image not available">

List: Create ordered and unordered lists.

<!-- Unordered List: No number will appear-->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Ordered List:Number will appear-->
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Semantic and Non-semantic tags

Semantic tags clearly define the purpose and meaning of the content they enclose. They improve the accessibility, readability, and SEO of a webpage by providing additional context to browsers and search engines. Examples: <main>, <article>, <aside> etc.

Non-semantic tags don’t convey any specific meaning about the content they contain. They are generic and provide no additional context about the structure or purpose of the content. Examples: <span>, <div> etc.

To learn more about HTML: HTML: HyperText Markup Language | MDN