{"id":3180,"date":"2024-05-02T11:54:29","date_gmt":"2024-05-02T09:54:29","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3180"},"modified":"2024-05-02T11:54:29","modified_gmt":"2024-05-02T09:54:29","slug":"usefull-html-tips","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2024\/05\/02\/usefull-html-tips\/","title":{"rendered":"Usefull HTML Tips"},"content":{"rendered":"\n<p>\u00a0Let us share few HTML Tips with code snippets that can boost our coding skills.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4>Defining Base URL for Relative Links<\/h4>\n\n\n\n<p>We can use the\u00a0<code><strong>&lt;base><\/strong><\/code>\u00a0tag to define the base URL for all relative URLs in a web page.<\/p>\n\n\n\n<p>This is handy when we want to create a shared starting point for all relative URLs on a web page, making it easier to navigate and load resources.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head>\r\n   &lt;base href=\"https:\/\/shefali.dev\" target=\"_blank\" \/>\r\n&lt;\/head>\r\n&lt;body>\r\n   &lt;a href=\"\/blog\">Blogs&lt;\/a>\r\n   &lt;a href=\"\/get-in-touch\">Contact&lt;\/a>\r\n&lt;\/body><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Creating Collapsible Content<\/h4>\n\n\n\n<p>We can use the\u00a0<code><strong>&lt;details><\/strong><\/code>\u00a0and\u00a0<code><strong>&lt;summary><\/strong><\/code>\u00a0tags, when we want to include collapsible content on our web page.<\/p>\n\n\n\n<p>The\u00a0<code>&lt;details><\/code>\u00a0tag creates a container for hidden content, while the\u00a0<code>&lt;summary><\/code>\u00a0tag provides a clickable label to toggle the visibility of that content.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;details>\r\n  &lt;summary>Click to expand&lt;\/summary>\r\n  &lt;p>This content can be expanded or collapsed.&lt;\/p>\r\n&lt;\/details><\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image.png\" alt=\"\" class=\"wp-image-3225\" width=\"265\" height=\"103\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image.png 324w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-300x117.png 300w\" sizes=\"(max-width: 265px) 100vw, 265px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large\"><img loading=\"lazy\" width=\"398\" height=\"143\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-1.png\" alt=\"\" class=\"wp-image-3226\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-1.png 398w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-1-300x108.png 300w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/figure><\/div>\n\n\n\n<p>           ===><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Providing Additional Information<\/h4>\n\n\n\n<p>The\u00a0<strong><code>title<\/code>\u00a0<\/strong>attribute can be used to provide additional information about an element when a user hovers over it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p title=\"World Health Organization\">WHO&lt;\/p><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Improving Video Presentation<\/h4>\n\n\n\n<p>The\u00a0<code><strong>poster<\/strong><\/code>\u00a0attribute can be used with the\u00a0<code>&lt;video><\/code>\u00a0element to display an image until the user plays the video.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video controls poster=\"image.png\" width=\"500\">\r\n  &lt;source src=\"video.mp4\" type=\"video\/mp4 \/>\r\n&lt;\/video><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Optimizing Video Loading<\/h4>\n\n\n\n<p>We can make video files load faster for smoother playback by using the<strong>\u00a0<code>preload<\/code><\/strong>\u00a0attribute with\u00a0<code>&lt;video><\/code>\u00a0element.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video src=\"video.mp4\" preload=\"auto\">\r\n   Your browser does not support the video tag.\r\n&lt;\/video><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Creating Download Links<\/h4>\n\n\n\n<p>We can use the\u00a0<code><strong>download<\/strong><\/code>\u00a0attribute with the\u00a0<code>&lt;a><\/code>\u00a0element to specify that when a user clicks the link, the linked resource should be downloaded rather than navigated to.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"document.pdf\" download=\"document.pdf\"> Download PDF &lt;\/a><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Accepting Specific File Types<\/h4>\n\n\n\n<p>We can use the\u00a0<code><strong>accept<\/strong><\/code>\u00a0attribute to specify the types of files accepted by the server (only for file type). This is used with the\u00a0<code>&lt;input><\/code>\u00a0element.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"file\" accept=\"image\/png, image\/jpeg\" \/><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Managing Translation Features<\/h4>\n\n\n\n<p>We can use the\u00a0<code><strong>translate<\/strong><\/code>\u00a0attribute to specify whether the content of an element should be translated by the browser\u2019s translation features.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p translate=\"no\">\r\n  This text should not be translated.\r\n&lt;\/p><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Enabling Content Editing<\/h4>\n\n\n\n<p>Use the<strong>\u00a0<code>contenteditable<\/code>\u00a0<\/strong>attribute to specify whether the element\u2019s content is editable or not. When setted to true, It allows users to modify the content within the element.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div contenteditable=\"true\">\r\n   You can edit this content.\r\n&lt;\/div><\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Grouping Form Elements<\/h4>\n\n\n\n<p>Use the\u00a0<code><strong>&lt;fieldset><\/strong><\/code>\u00a0tag to group related elements in a form and the\u00a0<code><strong>&lt;legend><\/strong><\/code>\u00a0tag with\u00a0<code><strong>&lt;fieldset><\/strong><\/code>\u00a0to define a title for the\u00a0<code>&lt;fieldset><\/code>\u00a0tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form>\r\n   &lt;fieldset>\r\n      &lt;legend>Personal details&lt;\/legend>\r\n      &lt;label for=\"firstname\">First name:&lt;\/label>\r\n      &lt;input type=\"text\" id=\"firstname\" name=\"firstname\" \/>\r\n      &lt;label for=\"email\">Email:&lt;\/label>\r\n      &lt;input type=\"email\" id=\"email\" name=\"email\" \/>\r\n      &lt;label for=\"contact\">Contact:&lt;\/label>\r\n      &lt;input type=\"text\" id=\"contact\" name=\"contact\" \/>\r\n      &lt;input type=\"button\" value=\"Submit\" \/>\r\n   &lt;\/fieldset>\r\n&lt;\/form><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"950\" height=\"113\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-2.png\" alt=\"\" class=\"wp-image-3227\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-2.png 950w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-2-300x36.png 300w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/image-2-768x91.png 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0Let us share few HTML Tips with code snippets that can boost our coding skills. Defining Base URL for Relative Links We can use the\u00a0&lt;base>\u00a0tag to define the base URL for all relative URLs in a web page. This is handy when we want to create a shared starting point for all relative URLs on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[702],"tags":[787,826,822,823,824,821,825],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3180"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3180"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3180\/revisions"}],"predecessor-version":[{"id":3228,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3180\/revisions\/3228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2769"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}