HTML is the foundation of every webpage in the huge world of web development. The building blocks of HTML (Hypertext Markup Language) are a number of elements, each of which is essential to the organization and display of content on the internet. We examine the meaning, semantics, and typical use cases of HTML elements as we go further into this blog. Points covered in this blog are:
- Understanding HTML tags.
- Semantic HTML vs. Non-semantic HTML.
- Commonly used HTML elements
.png) |
| Navigating the World of HTML Elements: A Comprehensive Guide |
Understanding HTML Tags
Tags, which are surrounded by angle brackets <>, are used to represent HTML elements. These elements let developers create anything from straightforward text paragraphs to complex interactive forms by defining the structure and content of a webpage. Every HTML tag has a distinct function that adds to the page's overall design and functioning.
Tags are typically comprised of an opening tag, a closing tag (if applicable), and the content nested in between. For instance, the <p> tag is used to define paragraphs:
<p>This is a simple HTML code </p>
Semantic HTML vs. Non-semantic HTML
Semantic
Non Semantic
Conversely, non-semantic HTML does not express any particular meaning; instead, it uses generic elements such as <div> and <span> for layout purposes. Non-semantic elements can make the HTML structure less descriptive and more difficult to understand, even though they give stylistic and layout flexibility.
Commonly Used HTML Elements
<div>: The<div>element is a versatile container used for grouping and styling content blocks. It serves as a fundamental building block for organizing and structuring the layout of a webpage.
<div>This is a simple div </div>
<p>: The<p>element defines a paragraph of text, allowing developers to segment and format textual content within the page.
<p>This is a simple HTML code </p>
<h1>-<h6>: Heading elements (<h1>to<h6>) are used to define headings of varying levels of importance, with<h1>being the most significant and<h6>the least.
<h1>I am H1 (biggest) </h1>
<h2>I am H2 </h2>
<h3>I am H3 </h3>
<h4>I am H4 </h4>
<h5>I am H5 </h5>
<h6>I am H6 (smallest) </h6>
<ul>,<ol>,<li>: These elements are used for creating lists.<ul>represents an unordered list (bullet points),<ol>represents an ordered list (numbered), and<li>denotes individual list items.
<ul><li>I am unorderd list </li> </ul>
<ul><li>I am orderd list </li> </ul>
<a>: The<a>element, also known as the anchor element, is used to create hyperlinks, allowing users to navigate between different webpages or sections within the same page.
<a href="paste url here">I am anchor tag </a>
<img>: This element is used to embed images into a webpage, enhancing visual appeal and providing additional context or information.
<img sec="image url" alt="alternate text">I am image tag</img>
<form>,<input>: The<form>element defines a section for user input, while<input>elements facilitate various types of input fields within the form, such as text fields, checkboxes, radio buttons, etc.
<form action="/action_page.php" method="get">
<input type="text" id="fname" name="fname">
<input type="submit" value="submit">
</form>
