Lesson 2

What is HTML | Heading | Paragraph | Anchor tag | Image element


HTML : Hyper Text Markup Language

html png

HTML stands for HyperText Markup Language. It is the standard language used to create and structure the content of a webpage.

  • HyperText: This refers to the ability to create links that connect web pages to one another, making the web a connected "web" of information.
  • Markup Language: This means you use "tags" to surround your content, giving that content meaning and structure. You are "marking up" a plain text document.

World's First Website: https://info.cern.ch/hypertext/WWW/TheProject.html


Install Required Software:

vs code logo
  1. Install Visual Studio Code

  2. Intall Visual Studio Code Extensions

1.The Heading ( h1 to h6 )

What it is: Headings are tags used to define titles and subtitles on your page. They are crucial for creating a logical hierarchy and outline for your content.

Heading tag
  • h1: The most important heading, typically used only once per page for the main title.
  • h2: A major section heading.
  • h3: A sub-section heading under an h2.
  • ..and so on, down to h6, the least important heading.

The Purpose: To structure your document in a way that is understandable to both humans and machines (like search engines and screen readers). It is not just for making text big; it is for giving the text structural importance.


2. The Paragraph (p)

What it is: The paragraph tag is the most common tag you'll use. It's for grouping sentences and blocks of text together.

The Purpose: To define a distinct paragraph of text. Browsers automatically add a little bit of space before and after a (P) element, separating it from other content. You should not use multiple line breaks; you should use multiple p tags.

p tag syntax picture

3: HTML Horizontal Rules

The (hr) tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The (hr) element is used to separate content (or define a change) in an HTML page:

Hr tag picture

4. The Line Break Tag:

This tag tells the browser, "Stop writing on this line and immediately start on the next one." It's like hitting the Enter key once in a poem or an address.

  • Purpose: Creates a single line break.
  • Example:
  • Br tag example

6. List Elements (ul, ol, li)

What it is: These tags are used to create lists. This is a perfect example of nesting.

The Tags:

  • ul: An Unordered List. It creates a bulleted list.
  • ol: An Ordered List. It creates a numberered list.
  • li: A List Item. Each item in either type of list must be wrapped in an (li) tag.

The Purpose: To group related items together in a list format. Example (Nesting in action):
The (li) elements are nested as children inside the (ul) parent.


Ordered list and unordered list example

7: The Anchor Tag (a)

What it is: The Anchor tag is what makes the web "hypertext." It is used to create a hyperlink to another webpage, a file, or a location within the same page.

The Purpose: To make text (or an image) clickable, allowing users to navigate. It requires an attribute called href (hypertext reference) to specify the destination URL.

anchor tag example

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • targgt="_self" - Default. Opens the document in the same window/tab as it was clicked.
  • target="_blank" - Opens the document in a new window or tab.

8. The Image Tag (img)

What it is: The Image tag is a self-closing tag used to embed an image onto your page.

The Purpose: To display a visual image. It requires two main attributes:

  • src(source): The path or URL to the image.
  • alt(alternative text): A description of the image. This is vital for accessibility (screen readers for the visually impaired will read this out) and for when the image fails to load.
img tag example