HTML elements are an essential part of its structure and semantics, yet many code (or web development) newbies do not know them well. They discount them and focus instead on other areas that contribute to the appearance, style, and functionality of a webpage. In this article, we will be examining the crucial role, HTML and HTML elements play in the practical development of the web. really Role of HTML on the Web HTML is a (i.e, a text that goes beyond ordinary text) markup language that describes the semantic structure of a webpage. It was first proposed by Tim Berners-Lee in 1989 and is defined by the W3C, which stands for World Wide Web Consortium. HTML was initially introduced for researchers and educators to share resource documents and other content like experimental data that they had found out with their peers. Today, it is used to build robust web applications with rich graphical user interfaces and can be enhanced with other technologies like CSS and JavaScript. hypertext The latest version of this markup language is HTML5, which extends, improves, and rationalizes the markup available for documents. HTML5 is the standard language for documents designed to be displayed in web browsers. It allows browsers to interpret and arrange text, images, and other resources into visually appealing or audible web pages. HTML5 is platform-independent, which means that it can be created on any computer, regardless of its operating system. Although HTML directs the arrangement of words in a web page, it does nothing about the spacing between paragraphs, color, font, etc. HTML is merely the code you write to structure your web content and give it purpose and meaning. HTML Elements I mentioned earlier that HTML semantically defines the structural content of web pages. HTML does this through the use of . are components that add formating and meaning to the content of a web document. elements HTML Elements Here's what the syntax of HTML elements look like: <!DOCTYPE html> <html> <head> <title>Basic Anatomy of HTML Elements</title> </head> <body> <h1>The main heading</h1> <p class="text">Hello world!</p> </body> </html> From the above, we can see that typically, elements contain: an which can contain some attributes (i.e. words that control an element behaviour and define its additional properties), enclosed text content, and a . opening tag <> closing tag </> HTML elements are used to enclose or wrap different parts of a webpage, to make it appear or act a certain way. For instance, the declaration tells browsers the standard compliance or version of the web content e.g., HTML 5. The element acts as a root container that describes the whole page. It is the parent element of the entire HTML web page. The element contains all sorts of content that would not be rendered to users such as the metadata or information about the rendering of the document. Key 'child' elements that are often used within the `head` element include; the , , , , , and elements. The element contains all the content that is visible to users when they visit your webpage such as text, lists, links, tables, and images. Let us now consider some of these elements in detail:👇 <!DOCTYPE html> <html></html> <head></head> title meta script style link base <body></body> Header This is a text-based element that denotes different sections of your document. it represents a group of introductory or navigational aids like the website branding, search bar, table of contents, and similar contents that are duplicated across all or most pages of a website. It contains information related to the title. A header element usually contains all the font changes, paragraph breaks, and any white space necessary to render the heading. HTML defines 6 levels of headings, from to with being the highest level and should only appear once per page while - are secondary headings. Additionally, the header element can be used to improve search engine optimization (SEO) and accessibility. <h1> <h6> h1 h2 h6 Note: Do not confuse the element with the element. The header element is usually used within the element in HTML which means its contents are visible on a webpage. header head body Paragraph This element specifies formatting details for paragraphs and is the most basic way of adding text to a webpage. As a result, it is one of the most widely used elements in HTML. By default, when a block of text is surrounded by paragraph tags, browsers create a single blank line before and after it. This helps to keep each paragraph separate from the others around it while alternate separation methods like first-line indentation can be introduced with CSS. In previous versions of HTML (HTML 4 and earlier), the opening tag of a paragraph element alone was sufficient to create a new paragraph. In HTML 5 however, this can lead to unexpected errors or results. Therefore, for good coding practice, it is advisable to include both the opening and closing tags of the paragraph element. As with the element, the element is used within the element. <p> </p> header paragraph body These are found in nearly all web pages, they are integral to the creation of the web. HTML links are that users can follow by clicking or selecting the link. They serve as a connection from one Web resource to another. A hyperlink has two ends (called anchors), usually starts at the anchor and points to a anchor, which could be any web resource such as an image, video clip, program, another HTML document or a specific element within an HTML document. Links hyperlinks source destination The element used to create a link is the element that is short for anchor. To add a link, use the (which actually means ; an uses a URL to reference another document) attribute to specify the link's destination (e.g https://www.google.com) to the opening tag then add the word(s) that will function as the link (e.g Google Homepage) as the enclosed text content and remember to include the closing tag so as to show where the link ends. Note that you might get unexpected results if you ignore the (i.e., the ) part of the web address. A sample link element would look like👇 <a> href hypertext reference href <a> </a> protocol https:// <a href="https://www.google.com">Google Homepage</a> Lists In HTML, lists are used to present information in an organized and well-formed manner. Texts, images, and links can be placed in a list item as well as in another list entirely (nested lists). The most commonly used list types are ordered and unordered lists. Ordered list elements are used when creating a list of related items in a particular order or when the order of arrangement is important. <ol> Unordered list elements are used to create a series of items (content, text, or links) that are identified as belonging in a group together but do not have a particular order associated with them. Each list item (whether ordered or unordered) is put inside a list element. For example: <ul> <li> The above code input translates into: In Conclusion has a variety of elements to choose from; however, I chose to focus only on the above four since they are the most fundamental ones. Elements are very important and are at the very core of the web. As a code newbie, If you are learning HTML, I believe you should start there. HTML 👋 👋 Hey, thanks for reading! This article was also published here
