HTML Basic Examples

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For instance, content could be structured inside a set of paragraphs, a list of bulleted points, or using images and data tables.

In this chapter we will show some basic HTML examples.

Try not to stress on the off chance that we use tags you have not found out about yet.

In this tutorial, you will learn-

In this article, you will learn-

1 HTML Documents
2 The <!DOCTYPE> Declaration
3 HTML Headings
4 Example
5 HTML Paragraphs
6 HTML Links
7 HTML Images
8 The A Href Attribute Example
9 How to View HTML Source?
- 9.1 View HTML Source Code:
10 Inspect an HTML Element:

HTML Documents

If you prefer, you can also watch the tutorial video below:

All HTML_documents should begin with a document type declaration: <!DOCTYPE html>.

The HTML_document itself starts with <html> and closes with </html>.

The apparent piece of the HTML document is among <body> and </body> .

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration addresses the document type, and assists browsers with showing site pages accurately.

It should just show up once, at the top of the page (before any HTML_tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings

HTML_headings are characterized with the <h1> to <h6> tags.

<h1> characterizes the most important heading. <h6> characterizes the least important heading:

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML_paragraphs are defined with the <p> tag:

Example

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

HTML Links

HTML links are defined with the <a> tag:

Example

<a href="https://www.worldofitech.com/">This is a link</a>

The connection’s objective is indicated in the href attribute.

Attributes are used to give extra data about HTML_elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML_images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="worldofitech.jpg" alt="worldofitech.com" width="104" height="142">

The A Href Attribute Example

The <a href> attribute refers to a destination given by a connection. The a (anchor) tag is dead without the <href> attribute. Now and again in your work process, you don’t need a live connection or you won’t know the link destination yet. For this situation, it’s valuable to set the href attribute to “#” to create a dead link. The Href attribute can be used to link to local files or files on the web.

For example:

<html>
  <head>
    <title>Href Attribute Example</title>
  </head>
  <body>
    <h1>Href Attribute Example</h1>
    <p>
      <a href="https://www.worldofitech.com/registration/"> The registration page</a> Welcome to worldofitech (World of Information Technology).
    </p>
  </body>
</html>

the <href> attribute is supported by all browsers.

How to View HTML Source?

Have you at any point seen a Web page and pondered “Hey! How could they do that?”

View HTML Source Code:

Right-click on an HTML_page and select “View Page Source” (in Chrome) or “View Source” (in Edge), or comparative in different browsers. This will open a window containing the HTM_Lsource code of the page.

Inspect an HTML Element:

Right-click on an element (or a clear area), and pick “Inspect” or “Inspect Element” to perceive what elements are comprised of (you will see both the HTML and the CSS). You can likewise alter the HTML or CSS on the fly in the Elements or Styles panel that opens.

Previous Tutorial

Next Tutorial

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.