Essential HTML Tags

When creating a web page, you add markup (tags) to the content. These tags add meaning and help browsers display the proper page structure. In this post, we'll focus on how to add markup to the text that appears on your pages. We'll learn about:

Structural markup: the elements that we can use to describe both headings and paragraphs.
Semantic markup: Semantic markup offers additional information, such as emphasizing a statement, identifying quotations, and explaining acronyms.

Tags are enclosed in angle brackets (<and>) telling the browser on how to display the content. Let's look at some of the most common HTML tags and how to use them:

Headings (h1- h6): HTML has "six" levels of headings:
- <h1> is used for the main or the most important heading.
- <h2> is used for the subheadings.

If there are additional sections under subheadings, then the <h3> element is used and so on...

<h1>This is a Main Heading</h1>
<h2>This is a level 2 Heading</h2>
<h3>This is a level 3 Heading</h3>
<h4>This is a level 4 Heading</h4>
<h5>This is a level 5 Heading</h5>
<h6>This is a level 6 Heading</h6>

RESULT:

Paragraph (<p>): The <p> tag defines the paragraph of text. To create a paragraph enclose the words that make up the paragraph with an opening <p> tag and closing </p> tag. By default , the browser displays each paragraph on a new line with some space between it and any subsequent paragraphs.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vivamus vehicula, ipsum ac sollicitudin cursus, 
eros neque venenatis felis, non feugiat libero ipsum vel nulla.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
 Integer convallis ligula vitae ligula consectetur, 
nec venenatis justo pulvinar.</p>

RESULT:

Bold (<b>) and Italic (<i>): The <b> tag makes the text bold, and the <i> tag makes the text italic. However, it's a better practice to use semantic markups like <strong> for bold and <em> for italic. These describe the content of the web page more accurately, especially for screen readers.

    <p> This text is <strong> bold </strong> 
    and this text is <em>italic</em>.</p>

RESULT:

Unordered List(<ul>) and Ordered Lists (<ol>): We use lists to group items together. Unordered lists use bullet points, while ordered lists use numbers.

  <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ul>

  <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ol>

RESULT:

Links(<a>): The <a> tag creates a hyperlink, allowing users to move from one page to another or to section of the current page.
```
  <a href = "https://www.developerchronicles.com"> Sakib's Blog</a>
```
The href attribute specifies the destination URL and "Sakib's Blog" is the text the user clicks on. The text between the opening <a> and closing </a> tag is known as link text. The link text should be meaningful (rather than just saying "click here") explaining where the visitors will be taken if they click on it.
Images(<img>): Use of images sets the tone for a site in less time than it takes to read a description. The <img> tag is used to emed images into a web page. The "src" attribute tells the browser where it can find the image file. The "alt" tag provides a text description of the image if you cannot see the image.
```
  <img src="https://unsplash.com/photos/a-person-sitting-
  at-a-desk-with-two-computer-monitors-XY0Cx9QsK3s"
   alt="Stock Image">
```
These are some of the many common HTML tags. By learning to use these basic tags, you can start creating your own web pages.