HTML elements are the building blocks of HTML pages. An element is defined by a start tag, some content, and an end tag: <tagname>content</tagname>. Some elements (like <br>) have no content and are called empty elements.

<!-- Example Elements -->
<h1>This is an example header.</h1>
<p>This is an example paragraph.</p>
<br> <!-- This is for page breaks. -->
<p>Above is an example for page breaks.</p>
<p>HTML is not case sensitive.</p>

HTML attributes provide additional information about elements. They are always specified in the start tag and usually come in name/value pairs like name="value". The style attribute is used to add inline CSS styling.

<!-- Example Attributes -->
<p style="color:red;">This is a red paragraph.</p>

Semantic HTML elements clearly describe their meaning to both the browser and the developer. In HTML4, non-semantic wrappers like <div id="nav"> were used. In HTML5, dedicated semantic tags like <nav>, <header>, <footer> replace them.

<div id="nav">
  ...
</div>

<nav>
  ...
</nav>

The <section> element defines a thematic grouping of content, typically with a heading. Sections and articles can be nested inside each other.

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature is...</p>
</section>

The <article> element represents a self-contained composition in a document — such as a news article, blog post, or forum post — that is independently distributable or reusable.

<article>
  <h1>What Does WWF do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's...</p>
</article>

The <header> element represents introductory content or a set of navigational links. It typically contains heading tags, a logo, or authorship information.

<article>
  <header>
    <h1>What is a book?</h1>
    <p>Book</p>
  </header>
  <p>A book is...</p>
</article>

The <footer> element defines a footer for a document or section. It typically contains authorship information, copyright data, or contact links.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact: <a href="mailto:someone@example.com">someone@example.com</a></p>
</footer>

The <nav> element defines a set of navigation links. It is intended for major navigational blocks — not all links need to be inside a <nav> element.

<nav>
  <a href="/html/">HTML</a>
  <a href="/css">CSS</a>
  <a href="/js">JavaScript</a>
  <a href="/jquery/">jQuery</a>
</nav>

The <aside> element defines content that is placed aside from the main content. It should be indirectly related to the surrounding content, such as a sidebar or callout.

<p>What is a book?</p>
<aside>
  <h4>Book</h4>
  <p>A book is a medium for...</p>
</aside>

The <figure> element specifies self-contained content like images, diagrams, or code snippets. The <figcaption> element provides a caption for the figure.

<figure>
  <img src="wrx.jpg" alt="WRX">
  <figcaption>Fig1. --- This is an old WRX model</figcaption>
</figure>

Output

The <p> element defines a paragraph. Browsers automatically add some white space (margin) before and after paragraphs. A paragraph is composed of two or more sentences.

<p>
  This is a sentence. A paragraph is composed of two or more sentences.
  So now, I am a paragraph! Wow!
</p>

HTML defines six levels of headings. <h1> is the most important and <h6> is the least. Headings are important for SEO — search engines use them to index the structure and content of web pages.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>