What is HTML and How to Start

blog img

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

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

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>

More Advanced Topics

1. Divs and Spans: For grouping and styling elements.

  • <div>: Block-level container, often used for layout.
  • <span>: Inline container for styling part of text.

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

Your email address will not be published. All fields are required.

Related post

  1. How to styled background – easy way

    CSS backgrounds define the background effects for elements in a…

  1. How to Adding CSS to HTML – easy way

    Adding CSS to HTML is essential for enhancing the visual…

  1. Learn HTML in easy way

    Hypertext Markup Language, or HTML, is the standard markup language…

  1. Complete Header tags in html – easy to learn

    H tags can be used to easily write headlines in…

Popular post

  1. Eclipse IDE – Create New Java Project.

    Opening the New Java Project…

  1. How to start the project in android studio

    Android Studio Open the Android…

  1. How to use ACOSH function in excel

    The ACOSH function returns the…

  1. Complete Header tags in html – easy to learn

    H tags can be used…

  1. Best features in Python programme – easy to learn

    Python is the most widely…