What is HTML and How to Start

Posted on: September 22, 2024 in HTML ,

HTML (HyperText Markup Language) is the standard language for creating web pages. It structures content on the web using tags. Each element in an HTML document is written using tags, like <tagname> for opening and </tagname> for closing.

Basic Structure of an HTML Document

  <!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title> <!-- Defines the title shown on the browser tab -->
  </head>
  <body>
    <h1>Hello, World!</h1> 
    <p>This is my first paragraph in HTML.</p> <!-- A paragraph -->
  </body>
<html>

<!DOCTYPE html>: Declares the document type as HTML5.
<html>: Root element that contains all the content of the web page.
<head>: Meta-information about the document, such as the title.
<body>: All visible content of the page goes inside the body.

Common HTML Tags

1. Headings: Used for titles or subtitles on the page. There are 6 levels of headings, from <h1> to <h6>.

HTML

<h1>Main Heading</h1>
<h2>Subheading</h2>

2. Paragraphs: Text can be added using the <p> tag.

Paragraphs

  <p>This is a paragraph of text.</p>

3. Links: Use <a> to create hyperlinks.

Link

  <a href="https://www.techsiter.com">Click here to visit techsiter.com </a>

4. Images: Insert images using the <img> tag.

Image

  <img src="image.jpg" alt="A description of the image">

5. Lists:

Unordered List: Bullet points.

Unordered list

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

Ordered List: Numbered items.

Ordered list

 <ol>
  <li>First item
  <li>Second item
</ol>

6. Tables: Structure tabular data.

TABLE

 <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

Table Result


  
    Header 1
    Header 2
  
  
    Row 1, Cell 1
    Row 1, Cell 2

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2

7. Forms: Allow users to submit data (e.g., login forms).

Form

 <form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Form Result


  Name:

Adding Styles with CSS

HTML alone defines the structure, but CSS (Cascading Style Sheets) adds styling to the web page. Example:

CSS inside the HTML

 <head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      font-family: Arial, sans-serif;
    }
  </style>
</head>

Example

 <div class="container">This is a block container </div>
 <p>This is an  <span style="color: red;">inline span </span>. </p>

2. Semantic HTML: Tags that give meaning to the structure of a document.

<header>: Top section of the page (e.g., logo, navigation).
<nav>: Contains navigation links.
<article>: Independent piece of content.
<footer>: Bottom of the page (e.g., copyright info).

Example

 <header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</li>
      <li><a href="#">About</li>
    </ul>
  </nav>
</header>

Share your thoughts Cancel reply

How to styled background – easy way
CSS backgrounds define the background effects for elements in a…

How to Adding CSS to HTML – easy way
Adding CSS to HTML is essential for enhancing the visual…

Learn HTML in easy way
Hypertext Markup Language, or HTML, is the standard markup language…

Complete Header tags in html – easy to learn
H tags can be used to easily write headlines in…