"Getting Started with HTML : A Beginner's Guide"

Kavya Gupta — Wed, 18 Dec 2024 17:58:24 +0000

HTML(Hypertext Markup Language) is a backbone of the web. It's used to structure content on the web and learning, it is the first step of your web development journey.

What is HTML?
HTML is the markup language for creating web pages. It uses elements, tags, attributes to define the structure of your content.
-> HTML code always between html element and html
element contain Head and Body elements.
-> Head is used for Meta Data.
-> Body is used for actual content.

Here is an example of a simple HTML document:

<!DOCKTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello</h1>
    <p> This is a paragraph</p>
</body>
</html>

Here are some commonly used HTML elements

Headings#

-> Headings are used to make any text as important and each
heading held its respective importance.
-> There are 6 headings possible in HTML <h1> to
<h6>.
-> h1 is biggest one and h6 is least one.

 <h1>This is heading</h1>

Paragraphs#

-> Use the <p> tag for the text content.

<p> This is paragraph </p>

Links or Hyperlinks#

-> Hyperlinks or links are used to navigate the user into
different address or references.
-> For creating hyperlinks we use anchor tag <a>.

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

Images#

-> Images are used for visual creatives in web page.
-> <img> tag is used to display images in web page.

<img src="https://example.com/image.jpg" 
   alt="Description Text">

Formatting tags#

-> Formatting tags are used to format the text such
as bold, italic etc.
-> HTML formatting tags:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text.

Links

-> Lists are used to list out certain items either ordered or
unordered.
-> In HTML , lists are classified into 3 types:

Ordered List

-> An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>
  <li>Bike</li>
  <li>Car</li>
  <li>Bus</li>
</ol>

Unordered List#

-> An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<ul>
  <li>Pen</li>
  <li>Box</li>
  <li>Pencil</li>
</ul>

Definition List

-> A Definition list is a list of terms, with a definition of each term.
-> The <dl> tag defines the definition list, the <dt> tag defines the term (name), and the <dd>tag describes each term:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Forem: Kavya Gupta