Basic HTML Elements for Beginners

In this blog, we will learn about HTML elements that I use on daily basis.

Picture of a laptop Screen written HTML

Contents:

  • Structural Elements
  • Navigation Element
  • Non-semantic Elements
  • HTML Comments
  • Section Element

Structural Elements: The purpose of these structural elements is to gove additional semantic meaning and organization.

<header> </header>
<footer> </footer>
<artcle> </article> Self-contained item of content
<aside> </aside>

Navigation Element: The purpose of this element is to wrap some set of links and be able to hop or navigate from one page to another. In other words, if we have a menu, we can use navigation elements to give it more structure and increase accessibility.

<nav> 
<ul>
<li> <a href="homepage.html">Home</a></li>
<li> <a href="homepage.html">About Us</a></li>
<li> <a href="homepage.html">Items page</a></li>
<ul>
</nav>

Non-semantic elements: The two most common elements under this category are:

<div>Block Level</div><span>Inline</span>

“div” = Division or a container. It is useful for styling purposes, such as adding CSS class names.

“span” = is the non-semantic version for <strong></strong> and <em></em> instead of using semantic elements, we can just use span to add style to our paragraph and it has no semantic meaning.

<div class="main body">
<p> Hi I love <span class="color">coding<span> </p>
</div>

HTML Comments: Set of comments written by the developer which does not render in the web browser.

<!-- this a comment --> 

The “Section” Element: Can be defined as smaller chapters or smaller sections. Section elements can be nested within the section and it will behave like h2, h3, and so on HTML elements.

<section>  <h1> A wiki of Ice and Fire</h1> 
<p> Ned takes three of his sons with him - Robb, Jon, and Bran - to witness the execution..... </p>

<section>
<h1> This is sub-section </h1>
<p> Ned Stark is one of the POV characters in the first book, and the main guy in the first season.</p>
</section>
</section>

Thanks to Udemy Courses and LearnWebCode (youtube) for this basic overview.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store