Element Examples

An HTML element is defined by a start tag, some content, and an end tag.

Block-level Elements. A block-level element always starts on a new line. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). A block level element has a top and a bottom margin, whereas an inline element does not. Let's look at the following example which demonstrates an inline element: The following span is an inline element; its background has been colored to display both the beginning and end of the inline element's influence. In this example, the block-level element. Finding HTML Elements by CSS Selectors. If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll method. Notes on Element Attributes How to use the style object. Position and style your elements using CSS.More/other keys are also possible. Note, the default style for most elements includes translate(-50%, -50%), which means that the coordinates you provide will set the position of the center of the element.

HTML Elements

The HTML element is everything from the start tag to the end tag:

Examples of some HTML elements:

Symbols from the periodic table are used for the individual elements examples are O for oxygen, H for hydrogen, C for carbon, N for nitrogen and Ca for calcium. Examples of Elements - Gas, Solid or Liquid? An element can be a gas, solid or liquid.

<h1>My First Heading</h1>
Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

Element Examples Sentence

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ScienceTry it Yourself »

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Adobe animate cc online free. Hollywood studios and online content creators use Character Animator to bring their characters to life in real time. It integrates seamlessly with other Adobe apps like Premiere Pro and After Effects. Animate just about anything. Design interactive animations for games, TV shows, and the web. Bring cartoons and banner ads to life. Create animated doodles and avatars. Use Adobe Animate to create vector animations. Create composites, motion graphics, and visual effects with Adobe After Effects. And move seamlessly between them and other Adobe apps, including Photoshop and Illustrator. Whether you’re using Windows or macOS, the right drawing tools and animation software awaits. Online, Instructor-Led Adobe Animate CC Training Classes Online training in a virtual classroom so you don't have to leave your desk Formerly called Adobe Flash, Adobe Animate CC now creates content based on the latest mobile-friendly HTML5 and CSS standards. Learn Adobe Animate today: find your Adobe Animate online course on Udemy.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Try it Yourself »

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example

<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their attributes.

TagDescription
<html>Defines the root of an HTML document
<body>Defines the document's body
<h1> to <h6>Defines HTML headings

Element Examples Chemistry

For a complete list of all available HTML tags, visit our HTML Tag Reference.



This page teaches you how to find and access HTML elements in an HTML page.

Finding HTML Elements

Literary Element Examples

Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do this:

  • Finding HTML elements by id
  • Finding HTML elements by tag name
  • Finding HTML elements by class name
  • Finding HTML elements by CSS selectors
  • Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id.

This example finds the element with id='intro':

Example

var myElement = document.getElementById('intro');
Try it Yourself »

If the element is found, the method will return the element as an object (in myElement).

If the element is not found, myElement will contain null.

Finding HTML Elements by Tag Name

This example finds all <p> elements:

Example

Try it Yourself »

This example finds the element with id='main', and then finds all <p> elements inside 'main':

Example

var x = document.getElementById('main');
var y = x.getElementsByTagName('p');
Try it Yourself »

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name, use getElementsByClassName().

This example returns a list of all elements with class='intro'.

Examples Of Elements Science

Example

var x = document.getElementsByClassName('intro');
Try it Yourself »

Finding elements by class name does not work in Internet Explorer 8 and earlier versions.

Finding HTML Elements by CSS Selectors

If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.

This example returns a list of all <p> elements with class='intro'.

Example

Try it Yourself »

The querySelectorAll() method does not work in Internet Explorer 8 and earlier versions.

Finding HTML Elements by HTML Object Collections

This example finds the form element with id='frm1', in the forms collection, and displays all element values:

Example

Element Examples
var x = document.forms['frm1'];
var text = ';
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + '<br>';
}
document.getElementById('demo').innerHTML = text;
Try it Yourself »

The following HTML objects (and object collections) are also accessible: