Javascript AJAX jQuery HTML PHP Example MORE

HTML Element with example

❮ Previous Next ❯

An HTML Consists of a “Start Tag”, “Element content” and “End Tag”.

Syntax:

<p>My Name is John<p>

Here<p>is start tag. My Name is John is the element content. <p> is the end tag.

Example

<!DOCTYPE html>
<html>
<body>
 
<p>My Name is John</p>
 
 
</body>
</html>

Run it yourself

  • <html>: The root element that contains all other elements on the web page.
  • <head>: Contains meta-information about the document, such as the title and links to external resources.
  • <title>: Sets the title of the web page, displayed in the browser's title bar or tab.
  • <meta>: Provides metadata about the document, like character encoding and viewport settings.
  • <link>: Links to external resources like stylesheets.
  • <style>: Contains CSS (Cascading Style Sheets) rules for styling the document.
  • <script>: Contains JavaScript code or links to external JavaScript files.
  • <body>: Contains the visible content of the web page, including text, images, and interactive elements.
  • <h1>, <h2>, <h3>, ... <h6>: Headings of decreasing importance.
  • <p>: Represents a paragraph of text.
  • <a>: Creates hyperlinks to other web pages or resources.
  • <img>: Embeds images.
  • <ul>: Defines an unordered (bulleted) list.
  • <ol>: Defines an ordered (numbered) list.
  • <li>: Represents a list item within <ul> or <ol>.
  • <div>: A block-level container used for layout and structuring content.
  • <span>: An inline container used for styling and scripting individual pieces of text.
  • <form>: Creates a form for user input, often containing input elements like text fields, buttons, and checkboxes.
  • <input>: Represents an input field within a form.

Empty HTML Elements

The Element which have no content is called as empty element.

<br> is an empty element without a closing tag (the <br> tag used to defines a line break in HTML).

<!DOCTYPE html>
<html>
<body>
<p>My Name is John</p>
<br>
<p>He is a good boy. </p>
</body>
</html>

Run it yourself

Nested HTML element

In some cases that an HTML element can contain one or more element.

Let’s see the below example for the better understanding.

<html>
<body>
 
<p><strong>This is a paragraph</strong></p>
 
</body>
</html>

Run it yourself

HTML Is Not Case Sensitive

HTML is not case sensitive. If you write

instead of

it gives the same output.Let’s see an example for better understanding. 

<!DOCTYPE html>
<html>
<body>
 
<p>My Name is John</p>
<P>My Name is John</P>
 
 
 
</body>
</html>

Run it yourself

<link> Element

The <link> element is generally used to load the css file for both internal and external file.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
</head>
<body>
    <a href="//www.studentstutorial.com">Visit our HTML tutorial</a>
</body>
</html>

Run it yourself

<base> Element

The HTML <base> element is used to specify a base URL for all relative links contained in the document, e.g. you can set the base URL once at the top of your page.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
   <base href="https://www.studentstutorial.com/">
</head>
<body>

<p>Hello World!</p>

  
</body>
</html>

Run it yourself

<script> Element

The <script> element is used to specify client-side script, such as JavaScript in HTML documents.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <script>
        document.write("<p>Hello World!</p>") 
    </script>
</head>
<body>
	<p>Script element example</p>
</body>
</html>

Run it yourself

❮ Previous Next ❯