{"id":354431,"date":"2021-10-18T16:51:11","date_gmt":"2021-10-18T13:51:11","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/?p=354431"},"modified":"2021-10-18T16:52:02","modified_gmt":"2021-10-18T13:52:02","slug":"structuring-the-web-with-html-in-detail","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/structuring-the-web-with-html-in-detail\/","title":{"rendered":"#Structuring the web with HTML in detail"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2e7430e6e47\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2e7430e6e47\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/structuring-the-web-with-html-in-detail\/#Structuring_the_web_with_HTML_in_detail\" >Structuring the web with HTML in detail:<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/structuring-the-web-with-html-in-detail\/#Introduction\" >Introduction:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/structuring-the-web-with-html-in-detail\/#How_does_HTML_Works\" >How does HTML Works?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Structuring_the_web_with_HTML_in_detail\"><\/span><strong>Structuring the web with HTML in detail:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"Introduction\"><\/span><strong>Introduction:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTML (Hypertext Markup Language) is a computer language. It is used to create most web pages and online <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lications. A hypertext is a piece of text that refers to other pieces of text. Whereas a markup language is a set of symbols that notifies web servers about the style and structure of a webpage. HTML is not a programming language since it cannot build dynamic functionality. Rather than using components, tags, and attributes, web users may arrange sections, paragraphs, and links.<\/p>\n<p>Here are a few examples of HTML&#8217;s most popular applications:<\/p>\n<ul>\n<li>Web development: HTML code is used by developers to define how a browser displays web page elements. It includes text, hyperlinks, and <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a> files.<\/li>\n<li>Internet navigation: Because HTML is widely used to contain hyperlinks, users may quickly navigate and insert links between similar pages and websites.<\/li>\n<li>Web documentation: HTML, like Microsoft Word, allows you to organise and format documents.<\/li>\n<li>It&#8217;s also worth mentioning that HTML has now been designated as an official online standard. The World Wide Web Consortium is in charge of maintaining and developing HTML specifications. It also delivers frequent updates. This article will cover the fundamentals of HTML, such as how it works, its advantages and disadvantages, and how it connects to CSS and JavaScript.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How_does_HTML_Works\"><\/span><strong>How does HTML Works?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A typical website contains several HTML pages. A home page, an about page, and a contact page, for example, would all have their own HTML files. HTML documents are files with the extensions .html or .htm.<\/p>\n<p>Any web browser reads the HTML file and displays its content for internet users to see. It has a collection of HTML components, including tags and attributes. HTML components are the foundation of a web page. A tag tells the web browser where an element begins and finishes, whereas an attribute defines an element&#8217;s properties. <a href=\"https:\/\/www.aistechnolabs.com\/html5-development-services\/\" target=\"_blank\" rel=\"noopener\"><strong>See this page<\/strong><\/a> for html5 application development company<\/p>\n<p>An element&#8217;s three primary components are:<\/p>\n<ul>\n<li>\u00a0 \u00a0 \u00a0 The opening tag specifies where an element begins to take effect. The tag is surrounded by angle brackets that open and close. To make a paragraph, for example, use the start tag &lt;p&gt;.<\/li>\n<li>\u00a0 \u00a0 \u00a0 The output that other users view is known as content.<\/li>\n<li>\u00a0 \u00a0 \u00a0 Closing tag \u2014 same as the opening tag, but with a forward slash before the element name. For example, to terminate a paragraph, use &lt;\/p&gt;.<\/li>\n<\/ul>\n<p>The combination of these three pieces will result in the creation of an HTML element:<\/p>\n<p><span style=\"color: #ff6600;\"><strong>&lt;p&gt;You can add a paragraph in HTML.&lt;p&gt;<\/strong><\/span><\/p>\n<p>Another essential aspect of an HTML element is its attribute. It consists of two sections: a name and an attribute value. The name indicates the additional information that a user wants to contribute, while the attribute value specifies further details. A style element with the colour purple and the font-family Verdana, for example, will appear like this:<\/p>\n<p><span style=\"color: #ff6600;\"><strong>&lt;p style=\u201dcolor:purple;font-family:verdana:&gt; You can add a paragraph in HTML.&lt;p&gt;<\/strong><\/span><\/p>\n<p>Another essential element for development and programming is the HTML class. The class property adds style information that may be applied to various components with the same class value.<\/p>\n<p>Most elements have an opening and a closing tag. However, certain elements, such as empty elements, do not require closing tags to function. Because they have no content, these components do not have an end tag:<\/p>\n<p><span style=\"color: #ff6600;\"><strong>&lt;img src=&#8221;\/&#8221; alt=&#8221;Image&#8221;&gt;<\/strong><\/span><\/p>\n<p>This image tag has two attributes: an SRC attribute, which contains the image URL, and an alt attribute, which contains the descriptive text. However, it lacks both content and an end tag.<\/p>\n<p>Finally, to notify the web browser about the document type, every HTML document must begin with a &lt;!DOCTYPE&gt; declaration. The doctype HTML public declaration in HTML5 will be:<\/p>\n<p><span style=\"color: #ff6600;\"><strong>&lt;!DOCTYPE html&gt;<\/strong><\/span><\/p>\n<p><strong>Most used HTML Tags and HTML Elements:<\/strong><\/p>\n<p>There are now 142 HTML tags available for the construction of different components. Even if some of these tags are no longer supported by contemporary browsers, understanding all of the distinct components accessible is still helpful.<\/p>\n<p>This section will go through the most often used HTML tags as well as the two primary elements \u2013 block-level elements and inline elements. A block-level element spans the whole width of the page. In the document, it always starts a new line. A header element, for example, will be on a different line than a paragraph element.<\/p>\n<p>These three tags are used on every HTML page:<\/p>\n<ul>\n<li>\u00a0 \u00a0 \u00a0 &lt;html&gt; tag is the root element that defines the whole HTML page.<\/li>\n<li>\u00a0 \u00a0 \u00a0 &lt;head&gt; element contains meta-information about the page, such as the title and charset.<\/li>\n<li>\u00a0 \u00a0 \u00a0 &lt;body&gt; element encloses all of the information on the page.<\/li>\n<\/ul>\n<p>Other frequent block-level tags are as follows:<\/p>\n<ul>\n<li>\u00a0 \u00a0 \u00a0 Heading tags &#8211; They vary from &lt;h1&gt; to &lt;h6. Here, h1 is the biggest and decreasing in size as they progress up to h6.<\/li>\n<li>\u00a0 \u00a0 \u00a0 Paragraph Tags &#8211; &lt;p&gt; element is used to encompass all paragraph tags.<\/li>\n<li>\u00a0 \u00a0 \u00a0 List tags &#8211; come in a variety of styles. For an ordered list, use the &lt;ol&gt; tag. And for an unordered list, use the &lt;ul&gt; tag. Then, use the &lt;li&gt; element to surround individual list items.<\/li>\n<\/ul>\n<p><strong>Conclusion:<\/strong><\/p>\n<p>HTML is the most common markup language used on the internet. Every HTML page has a set of elements that together form the content structure of a web page or application. HTML is a user-friendly language with a lot of support that is mostly used for static internet pages. HTML works best when combined with CSS for style and JavaScript for functionality.<\/p>\n<p><strong>Author Bio &#8211;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/i.hizliresim.com\/imeetl9.png\" width=\"90\" height=\"102\" \/><\/p>\n<p>Hermit Chawla is a MD at <a href=\"https:\/\/www.aistechnolabs.com\/\" target=\"_blank\" rel=\"noopener\">AIS Technolabs<\/a> which is a Web\/App design and Development Company, helping global businesses to grow by Global Clients. He love to share his thoughts on Web &amp; App Development, Clone App Development and <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/game\/\" data-internallinksmanager029f6b8e52c=\"7\" title=\"Game\" target=\"_blank\" rel=\"noopener\">Game<\/a> Development.<\/p>\n<p>&nbsp;<\/p>\n<p>For More:<\/p>\n<p>LinkedIn: \u00a0<a href=\"https:\/\/www.linkedin.com\/in\/hermit-chawla-lion-82b6513b\" target=\"_blank\" rel=\"noopener\">https:\/\/www.linkedin.com\/in\/hermit-chawla-lion-82b6513b<\/a><\/p>\n<p>Twitter:<a href=\"https:\/\/twitter.com\/aistechnolabs\" target=\"_blank\" rel=\"noopener\"> https:\/\/twitter.com\/aistechnolabs<\/a><\/p>\n<p>Facebook:<a href=\"https:\/\/www.facebook.com\/aistechnolabs\" target=\"_blank\" rel=\"noopener\"> https:\/\/www.facebook.com\/aistechnolabs<\/a><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology<\/a><\/span> category.<\/strong><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Structuring the web with HTML in detail: Introduction: HTML (Hypertext Markup Language) is a computer language. It is used to create most web pages and online applications. A hypertext is a piece of text that refers to other pieces of text. Whereas a markup language is a set of symbols that notifies web servers about&#8230;<\/p>\n","protected":false},"author":1,"featured_media":354441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/i.hizliresim.com\/giomaa1.jpg","fifu_image_alt":"#Structuring the web with HTML in detail","footnotes":""},"categories":[18],"tags":[],"class_list":["post-354431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/354431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=354431"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/354431\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/354441"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=354431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=354431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=354431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}