Hypertext Markup Language, or HTML, is the basic foundation of web development💻. It is the standard markup language for building websites and web-based applications. The building blocks of web pages are the elements of HTML, which provides the structure 🏗️ for the website 🌐. In this post, I'll explain HTML elements and attributes in more detail and show you how to use them to create web pages📃.
🤔What is an HTML Element 🧱?
HTML elements are the building blocks of an HTML document, such as a heading, a paragraph, an image, or a link, elements are defined by tags. An HTML element consists of a start tag, an end tag, and the content in between. For example, a paragraph element is represented by the <p> start tag and the </p> end tag, with the content of the paragraph appearing between these two tags.
<p>This is a Paragraph.</p>
🤷♂️ How to Use HTML Elements?
HTML elements are used to structure 🏗️ the content of a web page. To use an HTML element, you must open the tag <tagname> and then close it </tagname>. The closing tag is the same as the opening tag, but with a forward slash / before the keyword, like this </h1>. The content of the element goes between the opening and closing tags.
<tagname> This is content </tagname>
😑 Empty HTML Elements </>
HTML elements with no content are called empty elements. The <br> tag defines a line break, and is an empty element without a closing tag :
<p> This is a <br/> paragraph with a line break. </p>
💬HTML Elements Types 💫
Headings, paragraphs, lists, links, photos, tables, forms, and more are just a few of the many distinct kinds of HTML elements.
Here is a list of popular and most useful HTML elements:
| Defines the root of a HTML document |
| Contains information about the document, such as the title, meta |
| Contains the main content of a HTML document |
| Represents a container for introductory content or a set of |
| Represents a section of a page that contains navigation links |
| Represents the main content of a document |
| Represents a container for the footer of a document or section |
| Defines headings of different sizes and importance |
| Defines a paragraph of text |
| Represents an unordered list of items |
| Represents an ordered list of items |
| Represents a list item |
| Embeds an image in a document |
| Defines a hyperlink to another web page or a specific location on the same page |
| Represents a form for user input |
| Represents various types of input controls, such as text fields, checkboxes, and radio buttons |
| Represents a drop-down list of options |
< | Represents a multi-line plain text editing control |
| Represents a clickable button |
| Represents a table of data |
👁🗨What are HTML Attributes? 🔖
HTML attributes are properties that provide additional information about an HTML element. Attributes are added to the <> opening tag of an element, which typically has a name and a value. The src attribute, for example, is used to define the source of an image element, as in the following example :
<img src="image.jpg" alt="An Example Image" />
There are many different types of HTML attributes, including the following:
| Attributes | Description |
| id | Specifies a unique id for an element. |
| class | Specifies one or more class names for an element. |
| style | Specifies inline CSS styles for an element. |
| src | Specifies the source of an image element. |
| alt | Specifies alternative text for an image element. |
| href | Specifies the destination URL for a link element. |
| target | Specifies where to open a link. |
Conclusion 🧐
HTML elements are the building blocks of the web and are essential for creating web pages and web applications. By understanding the different types of HTML elements, tags, and attributes, and how to use them, you can start building your website with practice and a solid understanding of HTML.
Thank you for taking the time to read this article😊. If you found it helpful, I would greatly appreciate it if you could give it a like 👍 and share 🔁 it with your friends.
