HTML (HyperText Markup Language) is often considered one of the easiest programming languages to learn. It is the primary component of web development, serving as the foundation upon which the online world is built. Using HTML one can create intriguing websites, stimulating user interface and offer seamless user experience. In this article, I will share all the tags you need to use & know in HTML. You can use these tags and start creating webpages right now!
Document Structure
<!DOCTYPE>: Declares the document type and version of HTML being used.
<html>: Represents the root of an HTML document.
<head>: Contains meta-information about the document.
<title>: Defines the title of the document, displayed in the
browser's title bar or tab.
<meta>: Provides metadata about the HTML document.
<link>: Defines the relationship between the current document and an external resource.
<style>: Contains CSS rules for the document.
<script>: Embeds client-side scripts or links to external scripts.
<body>: Contains the content of the document.
Text Formatting
<p>: Defines a paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of different levels.
<strong>: Indicates strong importance, typically rendered as bold.
<em>: Emphasizes text, typically rendered as italic.
<u>: Defines underlined text.
<s> or <strike>: Defines strikethrough text.
<sup>: Defines superscript text.
<sub>: Defines subscript text.
<br>: Inserts a single line break.
<hr>: Represents a thematic break between paragraph-level elements.
Lists
<ul>: Defines an unordered list.
<ol>: Defines an ordered list.
<li>: Defines a list item within <ul> or <ol>.
Links and Anchors
<a>: Defines a hyperlink.
<href>: Specifies the URL of the page the link goes to.
<target>: Specifies where to open the linked document.
Images and Multimedia
<img>: Embeds an image into the document.
<src>: Specifies the URL of the image.
<alt>: Specifies an alternate text for the image.
<figure>: Represents self-contained content, such as images, diagrams, photos, code listings, etc.
<figcaption>: Provides a caption for the content within <figure>.
<audio>: Embeds sound content into the document.
<video>: Embeds video content into the document.
<source>: Specifies multiple media resources for media elements like <audio> and <video>.
Tables
<table>: Defines a table.
<tr>: Defines a row in a table.
<th>: Defines a header cell in a table.
<td>: Defines a data cell in a table.
<thead>, <tbody>, <tfoot>: Groups header, body, and footer content in a table.
Forms
<form>: Represents a form for user input.
<input>: Defines an input control.
<textarea>: Defines a multiline text input control.
<button>: Defines a clickable button.
<select>: Creates a drop-down list.
<option>: Defines an option in a drop-down list.
<label>: Defines a label for an <input> element.
Semantic Elements
<header>, <footer>, <main>, <nav>, <div>, <article>, <section>, <aside>: Defines different parts of a webpage, aiding in its semantic structure.
Miscellaneous
<iframe>: Embeds another HTML page into the current document.
<canvas>: Used for graphics and visualizations that are rendered dynamically.
<embed>, <object>, <param>: Embeds external resources into a document.
You can start writing and make awesome projects with only HTML in any plain text editor, such as Notepad (Windows), TextEdit (Mac), or gedit (Linux), or more advanced code editors like Visual Studio Code or even online editors like CodePen.
While mastering HTML might take some practice, getting started with it is relatively easy, making it an accessible entry point for anyone interested in coding or web development.
If you like my article, you can follow me on LinkedIn.
Top comments (0)