HTML Basics with Examples

2 min readSep 23, 2023

Hello, HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It consists of various elements and tags that define the structure and content of a web page. Let’s take a look at HTML in general with some examples:

1. Basic HTML Structure: -Link-

Every HTML document should have the following basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

<!DOCTYPE html>: Declares the document type and version of HTML being used (HTML5 in this case).
<html>: The root element that contains all other HTML elements.
<head>: Contains meta-information about the document, such as the title, character set, and linked stylesheets.
<title>: Sets the title of the web page (displayed in the browser's title bar or tab).
<body>: Contains the main content of the web page.

2. Headings: -Link-

HTML provides us with six levels of headings, from <h1> (highest) to <h6> (lowest):

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>

3. Paragraphs:

We use the <p> element to define paragraphs:

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

4. Links:

Let’s use the <a> element to create hyperlinks:

<a href="https://www.example.com">Visit Example.com</a>

5. Lists:

HTML supports ordered and unordered lists:

Unordered list (bulleted):

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

Ordered list (numbered):

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

6. Images:

To display images, use the `<img>` element:

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

7. Forms:

Forms allow user input. You can create text fields, checkboxes, radio buttons, and more:

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <input type="submit" value="Submit">
</form>

8. Divisions:

The `<div>` element is a container used for grouping and styling elements:

<div style="background-color: lightblue;">
    <p>This is a div element with some text.</p>
</div>

9. Comments:

You can add your own comment to the HTML using <! — →:

<!-- This is a comment -->

These are some of the fundamental HTML elements and concepts. HTML can be further enhanced with CSS for styling and JavaScript for interactivity, but the examples above cover the basics of creating the structure and content of a web page.

Thank you for reading…

HTML Basics with Examples

Written by SaimCan

No responses yet