What is Elements in HTML5?

HTML Elements in HTML5: Elements in HTML are individual components of a web document. It is a collection of the start tag, its attributes, the closing tag and the content that is held in between. In some cases, elements contain attributes that define additional formatting properties of the content that is displayed through it. Below is an example of an element that defines the attributes of a paragraph.

<p class="foo"> This is a paragraph. </p>

Notice the start tag, the end tag, and the section that defines the elements formatting properties. There are some elements that do not require a closing tag. They are called void elements, empty elements, or self-closing elements. Tags differ to elements in that they are used to mark the end and beginning of an element although the two terms can be used interchangeably to mean the same thing. This convention will be applied for the case of this tutorial.

HTML Elements in HTML5: In HTML, the names of tags and attributes are case insensitive implying that a browser will accept the tags <p> and </p> as start tags for a paragraph. However, in XHTML tags are case sensitive. For consistency, expert developers recommend lowercase letters for all tags, which would make it easy to upgrade the HTML document in the future.

Self-closing elements like <br>, which represents a line break, are not container tags and therefore have only a single tag because they do not require one for closing. Oftentimes, elements are held within other elements to create a nested element. Other classifications of elements are Block-level elements and in-level elements. Block level elements are formatted as blocks of text that run from one end of the display window to the other. A good example of a block level element is the one that defines a paragraph. Inline elements do not form a new block of text examples include tags that emphasize text.

HTML Entities

The basic elements of an HTML page are:

  • A text header, denoted using the <h1>,<h2>, <h3>, <h4>, <h5>, <h6>?tags.
  • A paragraph, denoted using the <p> tag.
  • A horizontal ruler, denoted using the <hr> tag.
  • A link, denoted using the?<a> (anchor) tag.
  • A list, denoted using the <ul>(unordered list), <ol> (ordered list) and <li> (list element) tags.
  • An image, denoted using the <img> tag
  • A divider, denoted using the <div> tag
  • A text span, denoted using the <span> tag

The next few pages will give an overview of these basic HTML elements.

Each element can also have attributes – each element has a different set of attributes relevant to the element. There are a few global elements, the most common of them are:

  • id – Denotes the unique ID of an element in a page. Used for locating elements by using links, JavaScript, and more.
  • class – Denotes the CSS class of an element. Explained in the?CSS Basics?tutorial.
  • style – Denotes the CSS styles to apply to an element. Explained in the?CSS Basics?tutorial.
  • data-x attributes – A general prefix for attributes that store raw information for programmatic purposes. Explained in detailed in the?Data Attributes?section.

What are the different attributes in HTML?

  • All HTML elements can have attributes
  • Attributes provide additional information?about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name=”value”

What is Nested HTML Elements?

A simple HTML element is made of an opening tag, a closing tag, and some content (text, images, etc.) between the two. In case of element nesting, an HTML element can also contain other elements which are then called nested elements.

What are semantic elements in HTML5?

List of new semantic elements

The semantic elements added in HTML5 are:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
Share.

Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

Comments are closed.