That Much of HTML Everyone Must Know !

7 min readJan 28, 2024

➡️HTML heading

HTML Heading is one of the most Simple and Important concepts , We use h1 ,h2, h3, h4, h5, h6 tags to for writing Html heading .

We rarely using <h6> tag because its makes heading very small its can`t visible easily.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>Hello this is HTML heaning</h1>
   <h2>Hello this is HTML heaning</h2>
   <h3>Hello this is HTML heaning</h3>
   <h4>Hello this is HTML heaning</h4>
   <h5>Hello this is HTML heaning</h5>
   <h6>Hello this is HTML heaning</h6>
</body>
</html>

➡️HTML Paragraph,

to insert HTML paragraph we use <p> tag . with it we can insert any size(no. word) of paragraph to our HTML document. before writing paragraph you need to know one thing more ,after opening <P> tag , if you don`t know what to write in this paragraph, then you need to put Dummy text By using Lorem24

<body>
    <p>lorem24</p> -- Hit_Enter
</body>

➡️Text Formatting HTML

As web developer , many times you will need to change the text formatting in paragraph, for this HTML Provides different types of attributes that we are going to disscuss Now.

1- Bold and Italics:

The <strong> element is used for bold text, and <em> is used for italic text.

<p><strong>This is bold text.</strong></p>
<p><em>This is italic text.</em></p>
<p><b>This is italic text.</b></p>
There is small difference b

2- Underline:

While HTML has no native underline tag, you can achieve underlining through CSS. However, it’s generally recommended to use other text formatting options like bold or italics for better readability.

<p style="text-decoration: underline;">This text is underlined.</p>

3- Strikethrough:

The <s> or <strike> element is used for strikethrough text.

<p><s>This text has a strikethrough.</s></p>
<p><strike>This text also has a strikethrough.</strike></p>

4- Superscript and Subscript:

Use the <sup> element for superscript and <sub> element for subscript.

<p>X<sup>2</sup> is the square of X.</p>
<p>H<sub>2</sub>O is water.</p>

5- Line Breaks:

The <br> element is used for line breaks.

<p>This is the first line.<br>This is the second line.</p>

6- Horizontal Rule:

The <hr> element is used to create a horizontal rule (line).

<p>This is some text above the line.</p>
<hr>
<p>This is some text below the line.</p>

➡️Inline VS Block Elements

As Beginner Web Developer it is very important to understand the concept Inline & Block element, Because these make it your base strong, with the concept of inline and block we can understand how much a element takes spaces on screen

Block-Level elements always begin on a new line, and browser adds a margin before and after the elements by default. And they always occupy the entire available width.

<P> <form> <Video> <dd> <div> <article> <Section> <header> <hr> <address> <table> <pre> <li> <main> <aside> <dl> <ul> <footer> <nav> <ol>

An inline element will not start on a new line and takes up as much width as necessary.

<span> <object> <i> <br> <a> <strong> <q> <input> <input> <label> <b> <Sup> <Script> <Small> <em> <img> <time> <abbr> <output> <samp> <button> <Code> <Sub> <textarea> <Select>

INLINE ELEMENTS

🔥Inserting images in HTML Documents

Images are a common elements of web design, and they serve a few different purposes on website ,One purpose is to make our website more visually engaging and attractive, we can also use images to convey any information on our website.

In HTML, the <img> tag is used to embed images in a web page. It is an empty tag, meaning it does not have a closing tag (self-closing tag). Instead, it uses attributes to specify details about the image. Here are the important attributes of the <img> tag

src (source):This attribute is required and specifies the URL (Uniform Resource Locator) of the image.

Example: <img src=”image.jpg” alt=”Description of the image”>

alt (alternate text):This attribute provides alternative text for browsers that cannot display the image. It is also used by screen readers for accessibility purposes.

Example: <img src=”image.jpg” alt=”A beautiful landscape”>

width: This attribute sets the width of the image in pixels.

Example: <img src=”image.jpg” alt=”Description” width=”300">

height:This attribute sets the height of the image in pixels.

Example: <img src=”image.jpg” alt=”Description” height=”200">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="/robin.jpg" alt="Robin_singh" width="300px">
    <p>Hello My Name is ROBIN SINGH <br> MY HOBBIES
    <br> Playing PC games, Reading, Writing ,Continus Learing </p>
</body>
</html>

Note: It’s generally recommended to specify either width or height to maintain the aspect ratio of the image.

*️⃣object-fit —

The object-fit CSS property sets how the content of a replace elements, such as an <img> or <video>, should be resized to fit its container.

In CSS, a replaced element is an element whose representation is outside the scope of CSS

Typical replaced elements are:

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: scale-down;
object-fit: none;

*️⃣object-position —

The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren’t covered by the replaced element’s object will show the element’s background.

You can adjust how the replaced element’s object’s intrinsic size (that is, its natural size) is adjusted to fit within the element’s box using the object-fit property.

object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;

⚛️How to create lists in HTML

In HTML, you can create both ordered and unordered lists using the <ul> (unordered list) and <ol> (ordered list) tags. Within these tags, you use <li> (list item) tags to define individual items in the list.

Unordered List

The list items will be marked with bullets (Black circles) by default

<ul type=” S”> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul>

Ordered List

The list items will be marked with bullets (Black circles) by default

<ol type=” B”> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ol>

Description List:

In addition to ordered and unordered lists, there is also a description list (<dl>). It is used to create a list of terms and their descriptions:

<dl> 
  <dt>Term 1</dt> 
  <dd>Description of term 1. </dd> 
  <dt>Term 2</dt> 
  <dd>Description of term 2. </dd> 
</dl>

In this example, <dt> stands for “definition term,” and <dd> stands for “definition description.”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 title="">UNORDERED LIST</h2>
    <ul type="circle" style="font-size: 30px;" > 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
    </ul>
    <h2 title="">ORDERED LIST</h2>
    <ol type="a" type="circle" style="font-size: 30px;">
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
    </ol>
    <h2 title="">DESCRIPTION LIST</h2>
    <dl style="font-size: 30px;"> 
        <dt>Term 1</dt> 
        <dd>Description of term 1. </dd> 
        <dt>Term 2</dt> 
        <dd>Description of term 2. </dd> 
      </dl>
</body>
</html>

⚛️interlink web pages

In HTML, you can create hyperlinks using the <a> (anchor) element. Hyperlinks can be used to link to other pages within your website or to external websites. Here’s how you can interlink web pages and navigate people to other websites:

Internal Links (Linking to Pages within Your Website):

To link to another page within your website, you need to know the relative path to that page. Here’s an example:

<a href=”about.html”>About Us</a>

External Links (Linking to Other Websites):

To link to an external website, you provide the full URL:

<a href=”https://www.example.com" target=”_blank”>Visit Example.com</a>

Linking to Email Addresses:

You can also create links that open the user’s email client with a pre-filled email:

<a href=”mailto:info@example.com”>Send us an email</a>

Linking with Text and Images:

Links can be applied to both text and images. Here’s an example of an image link:

♾️Semantic HTML

In HTML, Semantic tags are tags that describe the meaning or purpose of the content they contain. Semantic tags are used to add meaning to the content of a webpage, making it easier for search engines and other systems to understand the content of a webpage.

Some Semantic tags

<mark>
<header>
<footer>
<article>
<nav>
<main>
<figure>
<aside>
<details>
<section>

Details and Summary tag ‘‘Details ’’tag defines additional details that the user can hide/video ‘‘Summery ’’ on the other hand defines the visible heading for a ‘‘Details’’

<body>
    <details>
      <summary>About Me</summary>
      Hi, My name is Robin i live in a Small city 
      Pochenky which is located PUBG
      i completed my BSC (CS) From Lund University
      Want to Hire me ?
    </details>
  
</body>