Home  >  HTML

HTML basics for beginners

HTML (Hypertext Markup Language) is the standard language used to create and design web pages and also enables the creation of content that is properly displayed on a wide variety of Internet-connected devices, including smartphones, tablets, laptops, desktops, and specialized devices such as large screens.Here’s HTML basics for beginners:

Basic HTML document structure

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, My first html Page!</h1>
</body>
</html>

It is very simple for create HTML code , you can use any text editor like Notepad (Windows), TextEdit (Mac), or more advanced editors like Visual Studio Code, or the other tools which are now very plenty choose.

  • <!DOCTYPE html>: Declares the document type and version of HTML.
  • <html lang="en">: The root element of the HTML document, with the language set to English.
  • <head>: Contains meta-information about the HTML document (such as title and character set).
  • <title>My First HTML Page</title>: Sets the title of the HTML document, which appears in the browser tab.
  • <body>: Contains the content of the HTML document.

HTML elements

HTML elements are the building blocks of web pages which are defined by tags, normally it starts with opening tag ‘<tagname>’ and closed ‘</tagname>’.

EXCEPTION:

<br> No need closing tag </>

For example:

The paragraph tag will be:

 <p> Welcome to my Page </p> 
 <h1>Introduction</h1> 
Writing html code must be used the correct tag properly , if you want start opening tag , you have to closing tag after, when you finish your contents.

HTML Tags

HTML tags can be defined Paragraph, Table, Heading and also created Lists, Hyperlink, and images embed.

  • Paragraph: defines a paragraph of text and it always begins on a new line, and browsers automatically insert some white space

For Example:

      <p>This is the first paragraph.</p>
      <p>This is the second paragraph.</p>
  • Tables: defines tables using the <table>, <tr>, <th>, and <td> tags. We can create a row or column on web page by using this tag. In addition, we can adjust style or border to the table by CSS or its attribute.
<table>
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
    </tr>
    <tr>
        <td>Row 1 column 1</td>
        <td>Row 1 column 2</td>
    </tr>
<tr>
        <td>Row 2 column 1</td>
        <td>Row 2 column 2</td>
    </tr>
</table>
  • Lists: Creates ordered (<ol>) and unordered (<ul>) lists. We can group item in lists by <ul> tag is for unordered lists and <ol> tag is ordered lists.
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>
  • Images: embeds images using the <img> tag with the src and alt attributes.
    Syntax: <img src="image.jpg" alt="Description of image">
  • Links: creates hyperlinks using the <a> tag with the href attribute.
        <a href="https://freecode4learn.com">Please visit:    freecode4learn.com</a>
  • Headings: used to define headings from <h1> to <h6> tags. <h1> is the highest level to <h6> is the lower level.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output:

Headings
  • Forms: are used to collect information about user input.

Example:

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

Attributes:

HTML elements can have attributes that provide additional information about the elements. All element of HTML can have attribute.

For example:

<a href="www.freecode4learn.com" >Freecode4learn.com</a>
<img src="text.jpg" width="150" height="150" alt="description of image" style="color:red"></img>
<html lang="en">
  • href attribute is defined URL of web page, where is webpage going.
  • src: is a attribute for location or path of image.
  • width & height : describe about width and height of the image with pixel.
  • alt: is the description of the image
  • style : is used to defined style of element including color, with , height, font, and so on.
  • lang: is defined language of the webpage.

Nesting HTML Elements

Nesting HTML elements refers to placing one HTML element inside another. Properly nesting elements is crucial for creating well-structured and semantically correct web pages.

  • Close Tags: Always ensure each opening tag has a corresponding closing tag.
  • Correct Order: Nest elements in the correct order without overlapping.
  • Use Semantic Tags: Use appropriate HTML tags to give meaning to your content.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nesting test</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>Subitem 2.1</li>
                <li>Subitem 2.2</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Comments

Comments are used to leave notes in the HTML code and are not displayed in the browser. It is mean if you want to block some code statement to not execute.

<!-- This is a comment -->

Categories:HTML

Tags:

freecode4learn.com

Related Posts

Leave a Reply