How do you create text on a webpage that will allow you to send an email when clicked?
HTML 5 > Structuring Web Documents > HTML Tags
Short Question
4270
Answer:
To change text into a clickable link to send email, use the mailto command within the href tag. The format is as follows:
<a href= </p> <hr> <div style="text-align:center"> <a href="#list" class="btn btn-info btn-sm main-gradient-tutorials">Go to Question List</a> </div> <div class = "shadow p-3 mt-2" style = "border-radius: 10px;"> <div class='col m-3'><p> <i class='fa fa-info-circle'></i> <small>This Particular section is dedicated to <b>Question & Answer</b> only. If you want learn more about <b>HTML 5</b>. Then you can visit below links to get more depth on this subject. </small></p></div><div class='col m-3'><div class="row"> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/syllabus/html-5/2">HTML Syllabus </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/tutorial/about-html5-tutorial/2/233">HTML Tutorial </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/qanswer/what-is-html-/2/497">HTML Chapter Wise Questions and Answers </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/html-forms/2/53">HTML Assignment Chapter Wise </a> </div> <div class="col bg-light m-2 shadow btn btn-success"><a href="https://www.atnyla.com/general-knowledge/100/319">HTML MCQ Chapter Wise </a> </div> </div> <hr></div><hr style='height:3px;border-width:0;color:gray;background-color:gray'> </div> <br> <div class="shadow p-3 mb-5 bg-body rounded"> <a href="/tutorial/about-c-tutorial/1/152" class="btn btn-sm btn-default"># C Tutorials</a> <a href="/tutorial/java/0/0" class="btn btn-sm btn-default"># JAVA Tutorials</a> <a href="/tutorial/about-html5-tutorial/2/233" class="btn btn-sm btn-default"># HTML Tutorials</a> <a href="https://www.atnyla.com/tutorial/about-tutorial/6/395" class="btn btn-sm btn-default"># Computer Fundamental</a> <a href="https://www.atnyla.com/tutorial/about-dsa/3/295" class="btn btn-sm btn-default"># Data Structure</a> <a href="https://www.atnyla.com/tutorial/about-dbms-tutorial/13/713" class="btn btn-sm btn-default"># DBMS Tutorials</a> <a href="https://www.atnyla.com/tutorial/about-sql-tutorial/5/355" class="btn btn-sm btn-default">SQL</a> <a href="https://www.atnyla.com/tutorial/about-c-tutorial/8/468" class="btn btn-sm btn-default"># C# Language</a> <a href="https://www.atnyla.com/tutorial/about-r-tutorial/7/409" class="btn btn-sm btn-default"># R Language</a> <a href="https://www.atnyla.com/tutorial/about-php-tutorial/12/604" class="btn btn-sm btn-default"># PHP</a> <a href="https://www.atnyla.com/tutorial/about-python-tutorial/11/597" class="btn btn-sm btn-default"># Python</a> <a href="https://www.atnyla.com/tutorial/about-vue-js-tutorial/14/765" class="btn btn-sm btn-default"># Vue JS</a> </div> <hr> <h3>Join Our telegram group to ask Questions </h3> <p> Click below button to join our groups. </p> <div class="row"> <div class="col m-2 bg-light shadow btn btn-success"> <a href="https://t.me/atnyla" rel="nofollow" target="_blank"> Ask Question - CSE </a> </div> <div class="col m-2 bg-light shadow btn btn-success"> <a href="https://t.me/ComputerLanguageWithRumman" rel="nofollow" target="_blank"> Programming Language - PDF</a> </div> </div> <br> </div> </div> </div> <div class="col-lg-5"> <ul class="list-group" > <li id="list" class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><strong>Related Program List</strong></li> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/are-br-tags-the-only-way-to-separate-sections-of-text-question/47/696"> <h5 class="mb-1" style="color:#194757;">696. Are <br> tags the only way to separate sections of text?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240"> <small># Tutorial: HTML Tags</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/are-there-instances-where-the-text-will-appear-outside-of-the-browser-question/51/697"> <h5 class="mb-1" style="color:#194757;">697. Are there instances where the text will appear outside of the browser?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/table-elements-and-attributes-part-2/2/256"> <small># Tutorial: Table Elements and Attributes part 2</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/51"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: HTML Table</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/how-are-active-links-different-from-normal-links-question/47/698"> <h5 class="mb-1" style="color:#194757;">698. How are active links different from normal links?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/html-links/2/247"> <small># Tutorial: HTML Links</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/do-style-sheets-limit-the-number-of-new-style-definitions-that-can-be-included-within-the-brackets-question/47/699"> <h5 class="mb-1" style="color:#194757;">699. Do style sheets limit the number of new style definitions that can be included within the brackets?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: Style sheets do not limit the number of style definitions that can be included within the brackets for a given selector. Every new style definition, however, must be separated from the others by a semicolon symbol. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/presentational-elements/2/243"> <small># Tutorial: Presentational Elements</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/can-i-specify-fractional-weight-values-such-as-670-or-973-for-font-weight-question/47/700"> <h5 class="mb-1" style="color:#194757;">700. Can I specify fractional weight values such as 670 or 973 for font weight?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: Implementation largely depends on the browser, but the standard does not support fractional weight values. Acceptable values must end with two zeroes. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/presentational-elements/2/243"> <small># Tutorial: Presentational Elements</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-is-the-hierarchy-that-is-being-followed-when-it-comes-to-style-sheets-question/47/701"> <h5 class="mb-1" style="color:#194757;">701. What is the hierarchy that is being followed when it comes to style sheets?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/presentational-elements/2/243"> <small># Tutorial: Presentational Elements</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/47"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/can-several-selectors-with-class-names-be-grouped-together-question/46/702"> <h5 class="mb-1" style="color:#194757;">702. Can several selectors with class names be grouped together?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/relation-between-html-and-css/2/509"> <small># Tutorial: Relation Between HTML and CSS</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/46"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-happens-if-you-open-the-external-css-file-in-a-browser-question/46/703"> <h5 class="mb-1" style="color:#194757;">703. What happens if you open the external CSS file in a browser?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using <link/> tag within another HTML document. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/relation-between-html-and-css/2/509"> <small># Tutorial: Relation Between HTML and CSS</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/46"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/how-do-you-make-a-picture-into-a-background-image-of-a-web-page-question/46/704"> <h5 class="mb-1" style="color:#194757;">704. How do you make a picture into a background image of a web page?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: To do this, place a tag code after the </head> tag as follows: <pre class="prettyprint"> <xmp> <body background = </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/relation-between-html-and-css/2/509"> <small># Tutorial: Relation Between HTML and CSS</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/46"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px"> <div class="d-flex w-100 justify-content-between"> <a href="/qanswer/what-happens-if-the-list-style-type-property-is-used-on-a-non-list-element-like-a-paragraph-question/49/705"> <h5 class="mb-1" style="color:#194757;">705. What happens if the list-style-type property is used on a non-list element like a paragraph?</h5> </a> </div> <div class="card"> <div class="card-body"> Answer: If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph. </div> </div> <div class="d-flex w-100 justify-content-between"> <a style="color:#9e9d9d;" href="/tutorial/list-introduction/2/246"> <small># Tutorial: List Introduction</small> </a> </div> <a style="color:#9e9d9d;" href="/qa/-/2/49"> <small><i class="fa fa-code" aria-hidden="true"></i> Question: HTML Lists</small> </a> <span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span> </div> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/overview-of-java-language/0/2"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise Java Program</a></li> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/fundamentals-of-c-language/1/20"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise C Program</a></li> <li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/array/3/54"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise Data Structure Program</a></li> </ul> <br> </div> </div> </div> </div> </div> </div> </div> <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: blue; /* Set a background color */ background-color: transparent; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6); color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ border-radius: 50%; } #myBtn:hover { background-color: #00a7f5; /* Add a dark-grey background on hover */ } </style> <script> // Get the button: let mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera } </script> <footer id="footer" style = "background: linear-gradient(to right, #1a2980, #26d0ce); margin-top: 10px;" class = "text-white p-3"> <div class="footer-top"> <div class="container-fluid"> <div class="row"> <div class="col-lg-2 col-md-6 footer-contact text-white"> </div> <div class="col-lg-3 col-md-6 footer-links text-white"> <p style="font-size: 16px; color: white;">Useful Links</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/" class = "text-white">Home</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/" class = "text-white">About us</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/terms-and-conditions/" class = "text-white">Terms of service</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/guest-post" class = "text-white">Guest Post</a></li> <li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.atnyla.com/about/ads/" class = "text-white">Advertisement</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links text-white"> <p style="font-size: 16px; color: white;">Login</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">login</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">Sign Up</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-newsletter"> <p style="font-size: 16px; color: white;">Visit All Home</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/java-programming-language" class = "text-white">Subject</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/" class = "text-white">Library</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/blog/" class = "text-white">Blog</a></li> <!--<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>--> <!--<form action="" method="post">--> <!-- <input type="email" name="email"><input type="submit" value="Subscribe">--> <!--</form>--> </ul> </div> <!--<div class="col-lg-2 col-md-6 footer-newsletter">--> <!-- <p style="font-size: 16px; color: white; ">Social Links</p>--> <!-- <ul> --> <!-- <li> <a href = "https://chat.whatsapp.com/BfdvA6k89H28bD4q4QqiaK" class="text-white"> Join Whatsapp Group <i class="fa-brands fa-whatsapp"> </i> </a></li>--> <!--<li> <a href = "https://t.me/ComputerLanguageWithRumman" class="text-white"> Join Telegram Group <i class="fa-brands fa-telegram"></i> </i> </a></li>--> <!--</ul>--> <!--</div>--> </div> </div> </div> <div class="container d-md-flex text-white"> <div class="social-links text-center text-md-end pt-3 pt-md-0 text-white"> <!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>--> <!--<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>--> <!--<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>--> <!--<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>--> <!--<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>--> </div> </div> <div class="me-md-auto text-center text-md-start"> <div class="copyright text-center"> © Copyright <strong><span>atnyla</span></strong>. All Rights Reserved </div> <div class="credits text-center"> Designed by <a href="https://atnyla.com/" style="color: white">atnyla.com</a> </div> </div> </footer> <!-- Scripts --> <!-- Bootstrap core JavaScript --> <script src="https://atnyla.com/vendor/jquery/jquery.min.js"></script> <script src="https://atnyla.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="https://atnyla.com/assets/js/isotope.min.js"></script> <!--<script src=" https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script> --> <script src="https://atnyla.com/assets/js/owl-carousel.js"></script> <!--<script src="https://atnyla.com/assets/js/lightbox.js"></script>--> <script src="https://atnyla.com/assets/js/tabs.js"></script> <!--<script src="https://atnyla.com/assets/js/video.js"></script>--> <!--<script src="https://atnyla.com/assets/js/slick-slider.js"></script>--> <script src="https://atnyla.com/assets/js/custom.js"></script> <!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>--> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script> //according to loftblog tut $(".nav li:first").addClass("active"); var showSection = function showSection(section, isAnimate) { var direction = section.replace(/#/, ""), reqSection = $(".section").filter( '[data-section="' + direction + '"]' ), reqSectionPos = reqSection.offset().top - 0; if (isAnimate) { $("body, html").animate( { scrollTop: reqSectionPos, }, 800 ); } else { $("body, html").scrollTop(reqSectionPos); } }; var checkSection = function checkSection() { $(".section").each(function () { var $this = $(this), topEdge = $this.offset().top - 80, bottomEdge = topEdge + $this.height(), wScroll = $(window).scrollTop(); if (topEdge < wScroll && bottomEdge > wScroll) { var currentId = $this.data("section"), reqLink = $("a").filter("[href*=\\#" + currentId + "]"); reqLink .closest("li") .addClass("active") .siblings() .removeClass("active"); } }); }; $(".main-menu, .responsive-menu, .scroll-to-section").on( "click", "a", function (e) { e.preventDefault(); showSection($(this).attr("href"), true); } ); $(window).scroll(function () { checkSection(); }); </script> <script> $(document).ready(function () { $("#side-bar-toogle-btn").click(function () { $("#sidebar-list-group").toggle("slow"); }); }); </script> <script async src="https://fundingchoicesmessages.google.com/i/pub-7357847575760859?ers=1" nonce="P8qLHGFgH5IxNN3G6pLnUA"></script><script nonce="P8qLHGFgH5IxNN3G6pLnUA">(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <script> // prettyPrint(); </script> </body> </html>