HTML – Block and Inline Elements

<header> Tag

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

  • one or more heading elements (<h1> – <h6>)
  • logo or icon
  • authorship information

You can have several <header> elements in one document.

<!DOCTYPE html>
<html>
<body>
<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>

<footer> Tag

The <footer> tag defines a footer for a document or section.

A <footer> element should contain information about its containing element.

A <footer> element typically contains:

  • authorship information
  • copyright information
  • contact information
  • sitemap
  • back to top links
  • related documents

You can have several <footer> elements in one document.

<!DOCTYPE html>
<html>
<body>
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
<p><strong>Note:</strong> The footer tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

Note: The footer tag is not supported in Internet Explorer 8 and earlier versions.

<aside> Tag

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.

<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in Internet 
Explorer 8 and earlier versions.</p>
</body>
</html>

Note: The aside tag is not supported in Internet Explorer 8 and earlier versions.

<nav> Tag

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><strong>Note:</strong> The nav tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

Output :-

HTML | CSS | JavaScript | jQuery

Note: The nav tag is not supported in Internet Explorer 8 and earlier versions.

<div> Tag

The <div> tag defines a division or a section in an HTML document.

The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="background-color:lightblue">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
image 5

<h1> to <h6> Tags

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Attributes

AttributeValueDescription
alignleft
center
right
justify
Not supported in HTML5.
Specifies the alignment of a heading
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

<hr> Tag

The <hr> tag defines a thematic break in an HTML page. The <hr> element is used to separate content (or define a change) in an HTML page.

Attributes

AttributeValueDescription
alignleft
center
right
Not supported in HTML5.
Specifies the alignment of a <hr> element
noshadenoshadeNot supported in HTML5.
Specifies that a <hr> element should render in one solid color (noshaded), instead of a shaded color
sizepixelsNot supported in HTML5.
Specifies the height of a <hr> element
widthpixels
%
Not supported in HTML5.
Specifies the width of a <hr> element
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>

<pre> Tag

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Attributes

AttributeValueDescription
widthnumberNot supported in HTML5.
Specifies the maximum number of characters per line
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>
</body>
</html>

Output :-

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both      spaces and

line breaks

<section> Tag

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

<!DOCTYPE html>
<html>
<body>
<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>

Output :-

WWF

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

WWF’s Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

<abbr> Tag

The <abbr> tag defines an abbreviation or an acronym, like “Mr.”, “Dec.”, “ASAP”, “ATM”.

<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</body>
</html>

Output :-

image 7

Leave a Comment

Crypto logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus rutrum est nec suscipit. Ut et ultrices nisi. Vivamus id nisl ligula. Nulla sed iaculis ipsum.

Contact

Company Name

Address