DEV Community

Clara Situma
Clara Situma

Posted on • Updated on

HTML IS JUST LIKE WRITING A WORD DOCUMENT

Let's look at a quick word document:

Title: My First Document

Welcome to my Document!

This is a paragraph of text in my document. 
It's really quite an interesting paragraph, as paragraphs go. 
Here's a link to Google for more interesting content: www.google.com

Here is an image.
[IMAGE INSERTED]

Here is a list of my favorite fruits:
- Apples
- Oranges
- Bananas
Enter fullscreen mode Exit fullscreen mode

Now let's make it onto a website,using HTML

<!DOCTYPE html>
<html>
<head>
  <title>My First Document</title>
</head>
<body>
  <h1>Welcome to my Document!</h1>
  <p>This is a paragraph of text in my document. 
 It's really quite an interesting paragraph, as paragraphs go. 
Here's a link to the <a href="http://www.google.com">Google</a> website for more interesting content.</p>
  <img src="your-image-source.jpg" alt="An image in my document" />
  <p>Here is a list of my favorite fruits:</p>
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
  </ul>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Think of HTML tags as the equivalent of different elements in a Word document

Each _tag _serves a specific purpose and has a specific representation on the webpage. Let's dive in using our example:

  • !DOCTYPE html: This line is necessary to declare the document type and version of HTML. In this case, it's HTML5.

  • html: This is the root of an HTML document. Every tag that is used to display something on a webpage goes inside this tag.

  • head: This tag includes elements like the title of the document (which appears as the name of the tab in your web browser), links to stylesheets (CSS), character encoding declaration, and more. It's important to note that the content inside the

    tag does not appear on the webpage itself when viewed in a browser.
  • title: This tag is nested within the

    tag, and is used to set the title of the webpage.
  • body: The body tag is where the content of the webpage goes - this is what users see when they visit your webpage.

  • h1: This tag is used to add a top-level heading, which is usually the title of the webpage or the highest-level section title.

  • p: This is a paragraph tag, which is used to denote text paragraphs.

  • GOOGLE: This tag creates a hyperlink. The text between the opening tag and the closing tag is the text that will appear as a clickable link on your webpage. The URL of the page you want to link to is specified in the href attribute.

  • img: This tag is used to embed images into your webpage. The source of the image (src) points to the location of the image file, while the alt attribute provides alternative text for the image if it cannot be displayed.

  • ul and li : These tags are used to create unordered (bulleted) lists.

The ul tag denotes the start of the list, and each list item is wrapped in an li tag.

Top comments (0)