Block-level Elements:

  • A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
  • A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
  • Two commonly used block elements are: <p> and <div>.
  • The <p> element defines a paragraph in an HTML document.
  • The <div> element defines a division or a section in an HTML document.
  • The <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr>, <blockquote>, and <address> elements are all block level elements.

Inline Elements:

  • An inline element does not start on a new line.
  • An inline element only takes up as much width as necessary.
  • This is a <span> element inside a paragraph.
  • The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, and <cite> elements are all inline elements.

The <div> Element:

  • The <div> element is often used as a container for other HTML elements.
  • The <div> element has no required attributes, but style, class, and id are common.
  • When used together with CSS, the <div> element can be used to style blocks of content.

The <span> Element:

  • The <span> element is an inline container used to mark up a part of a text or a part of a document.
  • The <span> element has no required attributes, but style, class, and id are common.
  • This tag does not provide any visual change on the block but has more meaning when it is used with CSS.

Class Attribute:

  • The class attribute can be used on any HTML element.
  • The HTML class attribute specifies one or more class names for an element. Classes are used by CSS.
  • The class name is case-sensitive. Different HTML elements can point to the same class name.
  • The syntax for class is: write a period character (.), followed by a class name. Then, define the CSS properties within curly braces {}.

Id Attribute:

  • The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
  • The id attribute is used to point to a specific style declaration in a style sheet.
  • You cannot have more than one element with the same id in an HTML document.
  • The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

Examples:

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

My mother has blue eyes and my father has red eyes.

London

Paris

<html>
<head>
<title>HTML Elements and Attributes</title>
</head>
<body>
<h2>JavaScript to select and access specific elements.</h2>
<ul>
<li>The HTML class attribute specifies one or more class names for an element. Classes are used by CSS.</li>
<li>The class name is case sensitive. Different HTML elements can point to the same class name.</li>
<li>The syntax for class is: write a period character (.), followed by a class name. Then, define the CSS properties within curly braces {}.</li>
</ul>
<h2>Id Attribute:</h2>
<ul>
<li>The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.</li>
<li>The id attribute is used to point to a specific style declaration in a style sheet.</li>
<li>You cannot have more than one element with the same id in an HTML document.</li>
<li>The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.</li>
</ul>
<h2>Example:</h2>
<h2 class="city">London</h2>
<h2 id="city">Paris</h2>
</body>
</html>