#4 HTML <Tags />
I am a Full stack Developer from India and Tech savvy.
What are Tags?
In HTML, HTML tags are the building blocks of HTML, the language used to create websites. HTML tags are codes that are used to create the different elements of a web page.
They consist of opening and closing tags, which are wrapped around content to define its meaning and presentation. The opening tag is enclosed in angle brackets and contains the name of the tag, and the closing tag is also enclosed in angle brackets and contains the name of the tag preceded by a forward slash.
For example, the HTML tag for a paragraph is <p>, which is the opening tag, and </p>, which is the closing tag. The content that is contained between the opening and closing tags is what makes up the paragraph.
There are many different HTML tags that can be used to create various types of content, such as headings, images, links, lists, tables, forms, and more. By using a combination of these tags, web developers can create complex web pages with a variety of content and functionality.
Some useful HTML tags
<html> - This tag is used to indicate the start and end of an HTML document.
<head> - This tag is used to contain the metadata of an HTML document, such as the title, description, and keywords.
<body> - This tag is used to contain the visible content of an HTML document, such as text, images, and other media.
<p> - This tag is used to indicate a paragraph of text.
<h1> to <h6> - These tags are used to indicate headings of varying sizes and importance, with <h1> being the largest and most important.
<img> - This tag is used to insert an image into an HTML document.
<a> - This tag is used to create a hyperlink to another web page or to a specific part of the same page.
<ul> and <li> - These tags are used to create unordered lists, with <ul> indicating the start of the list and <li> indicating each item in the list.
<ol> and <li> - These tags are used to create ordered lists, with <ol> indicating the start of the list and <li> indicating each item in the list.
<table>, <tr>, <td> - These tags are used to create tables, with <table> indicating the start of the table, <tr> indicating a row, and <td> indicating a cell within the row.
Let's create a website
<!DOCTYPE html>
<html>
<head>
<title>My Simple Website</title>
</head>
<body>
<h1>Welcome to My Simple Website</h1>
<p>This is a simple website created using HTML tags.</p>
<h2>My Favorite Things</h2>
<ul>
<li>Cats</li>
<li>Pizza</li>
<li>Reading</li>
</ul>
<h2>A Photo of a Cat</h2>
<img src="https://placekitten.com/200/300" alt="A photo of a cat">
<h2>My Favorite Quote</h2>
<blockquote>"The only way to do great work is to love what you do." - Steve Jobs</blockquote>
<h2>Contact Me</h2>
<p>You can contact me by <a href="mailto:example@gmail.com">email</a>.</p>
</body>
</html>
Attributes in HTML
In HTML, attributes are additional pieces of information that can be added to an HTML element to provide more details about that element. Attributes are used to modify the default behavior of an element or to provide additional information about it.
Attributes are specified within the opening tag of an HTML element and consist of a name and a value, separated by an equals sign. The value is usually enclosed in quotation marks.
Here's an example of an HTML element with an attribute:
<img src="image.jpg" alt="An image of a mountain">
In this example, the <img> tag is used to display an image, and it has two attributes: src and alt. The src attribute specifies the location of the image file, and the alt attribute provides alternative text for the image, which can be used by screen readers or when the image cannot be displayed.
Some common attributes in HTML include:
class- used to specify one or more CSS classes for an elementid- used to specify a unique identifier for an elementhref- used to specify the URL of a hyperlinktitle- used to provide additional information about an element (often displayed as a tooltip)style- used to specify inline CSS styles for an element
Each HTML element has a specific set of attributes that can be used with it. By using attributes, you can modify the behavior and appearance of HTML elements to create more sophisticated and dynamic web pages.
HTML forms
In web development, HTML forms are a way for users to input data and interact with a web page. Forms allow users to submit data such as text, numbers, or files to a web server for processing.
An HTML form is created using the <form> tag, which contains one or more input elements, such as text boxes, checkboxes, radio buttons, and dropdown lists. When the user submits the form, the data is sent to a server using the HTTP protocol. The server can then process the data and send a response back to the user.
Here's an example of a simple HTML form:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
In this example, the form has three input elements: a text box for the user's name, an email input for the user's email address, and a text area for the user's message. The action attribute specifies the URL of the script that will process the form data when it is submitted. The method attribute specifies the HTTP method that will be used to submit the form data (in this case, POST).
When the user clicks the "Submit" button, the form data is sent to the script specified in the action attribute, which can then process the data and generate a response. Form processing can be done using server-side languages like PHP, Python, or Node.js.
HTML forms are an essential part of web development, allowing users to interact with web pages and submit data for processing. They are used in a wide range of applications, from simple contact forms to complex web applications.
Some HTML Form Tags
<form>: This tag creates an HTML form that contains input fields and other elements that allow users to submit data to a web server.<input>: This tag creates a variety of input fields that allow users to enter data, such as text, numbers, dates, and files. Some of the commontypeattributes used with the<input>tag includetext,password,checkbox,radio,submit,reset,file,date,time, andemail.<textarea>: This tag creates a multi-line input field that allows users to enter large amounts of text, such as comments or messages.<select>: This tag creates a drop-down list that allows users to select one or more options from a list of predefined values.<option>: This tag is used within the<select>tag to define the values that can be selected in the drop-down list.<label>: This tag is used to associate a label with an input field, allowing users to click on the label to select the input field.<button>: This tag creates a clickable button that can be used to submit a form or perform other actions.<fieldset>and<legend>: These tags are used to group related form elements and provide a title for the group.<form action="url" method="get/post">: This tag specifies the destination URL and HTTP method that will be used to submit the form data.
Example with HTML forms
<!DOCTYPE html>
<html>
<head>
<title>Simple Form Example</title>
</head>
<body>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<label for="favorite-color">Favorite Color:</label>
<input type="color" id="favorite-color" name="favorite-color"><br><br>
<label for="favorite-fruit">Favorite Fruit:</label>
<select id="favorite-fruit" name="favorite-fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="strawberry">Strawberry</option>
</select><br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this example, the form includes several different input types, including text boxes, email fields, password fields, number fields, radio buttons, color pickers, and dropdown lists. The form also includes a textarea for comments, as well as a submit button.
When the user submits the form, the data is sent to the server specified in the action attribute of the form using the HTTP method specified in the method attribute (in this case, post). The server can then process the data and generate a response.
Note: that the example above is just a simple illustration of how you can use HTML form tags. In a real web application, you would need to implement server-side code to process the form data and handle user input securely.
Semantic HTML
Semantic HTML refers to the use of HTML markup to convey the meaning and structure of web content rather than just its appearance. In other words, it's using HTML tags to provide more context and meaning to the content of a web page, so that it can be more easily understood by both human readers and machines such as search engines, screen readers, and other assistive technologies.
By using semantic HTML, web developers can create more accessible, more maintainable, and more search engine-friendly web pages. Here are some examples of semantic HTML tags and their meaning:
<header>: This tag represents the introductory content of a web page, such as the logo, the site navigation, and the main heading.<nav>: This tag represents a section of a web page that contains navigation links.<article>: This tag represents a self-contained piece of content, such as a blog post or a news article.<section>: This tag represents a generic section of a web page, such as a chapter or a group of related articles.<aside>: This tag represents content that is related to the main content of a web page, but can be considered tangential or supplementary.<footer>: This tag represents the footer or end content of a web page, such as the copyright information or the site map.<main>: This tag represents the main content of a web page, which should be unique to that page and not repeated across multiple pages.
By using these and other semantic HTML tags appropriately, you can make your web content more understandable and useful to both humans and machines.
HTML Media
HTML media refers to the various multimedia content that can be included in an HTML document, such as images, videos, and audio files. By incorporating media elements into your web pages, you can make your content more engaging, informative, and visually appealing.
Here are some examples of how to use HTML tags to include different types of media:
<img>: This tag is used to display images on a web page. You can specify the image source using thesrcattribute and add alternative text for users who can't see the image using thealtattribute. Example:<img src="example.jpg" alt="Example image"><video>: This tag is used to embed video content on a web page. You can specify the video source using thesrcattribute and add controls for playing, pausing, and adjusting the volume using thecontrolsattribute. Example:<video src="example.mp4" controls> </video><audio>: This tag is used to embed audio content on a web page. You can specify the audio source using thesrcattribute and add controls for playing, pausing, and adjusting the volume using thecontrolsattribute. Example:<audio src="example.mp3" controls> </audio><iframe>: This tag is used to embed external content, such as a YouTube video or a Google Map, on a web page. You can specify the source URL using thesrcattribute. Example:<iframe src="https://www.youtube.com/embed/example"></iframe>
By including multimedia elements in your web pages, you can make your content more engaging and dynamic, and provide users with a more rich and interactive experience. However, it's important to use media elements responsibly and ensure that they are accessible and do not negatively impact the page's performance.
These are the main topics that are basic in HTML there are various other topics in HTML that are not included but you can find out and learn those topics on your own.
Exercise
Here are some basic exercises which are covered in this article.
Create a Portfolio website that tells your skills and your work. use all the HTML tags that you have remembered.
Create a user input page that takes basic information of the user, then stores the data using https://formspree.io/.
Embed your favorite Youtube video into your website.
Reference
Outro
I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter tejaswan1 and Instagram Tech Shark (@techshark_web)
