Basic HTML Elements for Beginners
In this blog, we will learn about HTML elements that I use on daily basis.
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.
