HTML Basics: A Coding Language (Part 1)

Did you just have a thought of building a website on HTML? Or you are trying to learn the basics of HTML to kick start your development journey? If you are looking for any of the above, Google landed you on the right page.

In this article, we are going to go through the basics of HTML. Lets get started!!

What Is HTML?

Hypertext Markup Language, or HTML, is a relatively straightforward language. It is made up of several components that we employ to structure web pages. Its a pure language of coding.

What are the elements of HTML?

The element often begins with an opening tag that contains the element’s name. Opening and closing angle brackets surround it. The element’s beginning is indicated by the opening tag.

The closing angle brackets includes a forward slash before the element’s name.

But not all elements follow this pattern. We call those that don’t empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the page.

<img src="https://images.trediemedia.com/photo-1610447847416-40bac442fbe6" width="50">

In the aforementioned illustration, the <img> element is made up of a single tag with no content. This component is used to add an trendiemedia picture file to the document.

How to Nest HTML Elements

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Elements can be placed inside other elements. This is called Nesting. In the example above, inside the <div> element we have an <h4> element and an <ul> or unordered list element. And Similarly inside the <ul> element, there are 3 <li> or list item elements.

Consider the layout structure you want to use. You can visualise it in your head or on paper. It will be really helpful.

What are HTML Attributes?

Additionally, elements include attributes, which are additional details about the element that do not display in the content.

<img src="https://images.unsplash.com/photo" width="50">

The <img> element in the previous example has two attributes: src or source to specify the image’s path and width to specify the image’s width in pixels.

However, not all attributes follow the same trend. Boolean Attributes are those that can exist without values.

Common HTML elements

There are more than 100 elements in all. However, you will only use the top 20 about 20 percent of the time. Five groups have been created by me:

Section elements

  <div>, <span>, <header>, <footer>, <nav>, <main>, <section> 

These components are utilised to divide the information into various sections. Usually, they are self-explanatory.

Text content

  <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

These components are utilised to arrange text or content blocks. They are crucial for SEO and accessibility. They communicate to the browser the function or organisation of the material.

Related Post: What is SEO?

Forms

  <form>, <input>, <button>, <label>, <textarea>

Together, these components can be used to generate forms that users can complete and submit.

  <img>, <a>

These elements are used to insert an image or create a hyperlink.

Hope you got the basics of HTML via our article, This one is just part 1 stay tuned for part 2 where we will cover Block-level vs inline HTML elements, How to comment in HTML, How to use HTML entities, How to use emoji in HTML and know about the Common beginner mistakes in HTML so you don’t make one 😉.

Follow us on Twitter to stay updated on latest news and article at trendiemedia

Leave a Reply

Your email address will not be published.