This article will take you through all the basic knowledge of HTML and provide ample opportunity for you to test out some skills. It covers the basics of HTML.
To aid you, we define elements, tags and we also show you how a typical HTML page and element is structured as well as explaining other important points.
Let's look at the definition of the concepts.
HTML?
HTML stands for Hypertext Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. HTML is heavily used for creating pages that are displayed on the world wide web. HTML consists of a series of elements, which is used to wrap different parts of the content to make it appear a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller.
Moreso, HTML tags normally come in pairs,
The first tag in a pair is often called the opening tag, which is wrapped in opening and closing angle brackets otherwise known as the greater than and less than sign (< >). The second tag is called the closing tag ,which is the same as the opening tag, except that it includes a forward slash before the element name (</>). It shows where the element ends, if any of these symbols are failed to add it will lead to strange results which is usually common among the beginners even sometimes full developers. Tags also include content and the contents together with the tags are called elements <h1> Hello World </h1> ,these are called elements, which shows the opening tags, content and closing tags respectively. Furthermore let's look at some important information available to know about HTML.
IMPORTANT INFORMATION ABOUT HTML STRUCTURE
There is certain code that should be in every HTML document to establish a basic structure and let the browser know some important information about the page and they are referred to as HTML Skeleton, These are the set of tags required of every HTML web page you build. The tags that make up the skeleton tell browsers what kind of file it is reading, and without the skeleton HTML files will not be rendered correctly in web browsers, beneath this text is a picture of it. let's look at them briefly;
!DOCTYPE: It shows or defines what document type that is being used, and it is being identified as html.
<html></html>: These letters or text modify an HTML document.<html lang=”en”>: It identifies the language of text content on the web and the “en” refers to english.<head></head>: It helps provide information about the document (currently) in use.<meta>: Meta 1 tag holds the character set used. It helps the web browser to know the character set used in the page.<meta>: Meta 2 tag holds the viewport element and gives the browser instructions on how to control the page’s dimensions and scaling. The viewport has to do with the area of the window in which web content can be seen(The width=device-width): It helps set the width of the page to follow the screen-width of the device which varies on devices.
(The initial-scale=1.0): It helps set the initial zoom level when the page is first loaded by the browser.
<title></title>: Which is a name that describes something, here the words in between the tags known as element provides a title for the document which will be displayed at the title bar when a browser is loaded.<body></body: It helps describe the visible page content, that is where the main work (contents of an html document) is to be written. such as headings, paragraphs, images, hyperlinks, tables, lists, etc. and it will be well organized on the web page.
BASIC HTML TAGS
HTML tags are keywords which define how a web browser will display the content and they are special words wrapped in angle brackets as we earlier discussed and every tag in HTML performs different tasks.
Let's look at some common html tags.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: In html we have the heading tag which consist of of the above mentioned and it usually have different font sizes as<h1>having the larger font and its usually used as the header of any document and<h6>the least of them<p></p>): It stands for paragraph tag. It is usually used to make paragraphs of text.<hr>: It is always displayed as a horizontal rule that is used to separate content in an html page.<br>: It produces a line break in text . It is useful for writing a poem or an address, where the division of lines is significant when it is introduced, any text after it falls into the next line.<a>: It defines a hyperlink, which is used to link from one page to another. It also href attribute, which indicates the link’s destination. It is written as<a href=””</a>.<link>: It defines the relationship between the current document and an external resource. It is used to link to external style sheets. e.g<link rel="stylesheet" href="styles.css":.<li>: It is used to represent an item in a list. It has<ol>which is an ordered list and is usually displayed using numbers or alphabets. It also has<ul>which is unordered lists, and is usually displayed using bullet points.<img>: It is used to insert images in a web page.<video>: It is used to insert video content in a document.<form>: It is used for creating a form for user input.<input>: It specifies an input field where the user can insert data. it can be displayed in several ways, depending on the type attribute.<section>: It defines sections in a document, such as chapters, headers, footers etc.<div>: It is used as a container for html elements, it is used to make divisions of content in the web page.<aside>:It is used to describe the main object of the web page in a shorter way like a highlighter. it represents a portion of a document whose content is only indirectly related to the document’s main content.<span>: It is an inline container used to mark up a part of a text, or a part of a document. It used to group elements for styling purposes by using the class or id attributes.<nav>:It represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.<header>: It is used to define the header for a document or a section as it contains the information related to the title and heading of the related content.<footer>: It defines a footer for a document or section. it contains: authorship information, copyright information, contact information etc.<main>: It represents the dominant content of the body of a document. Its area consists of content that is directly related to or expands upon the central topic of a document.
<article>: It represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card etc.
Note: we have so many tags in HTML but the above mentioned would at least give you a guide on html tags and as you learn further you will be exposed to the ones not mentioned.
CONCLUSION
In this article, we have discussed HTML basics, its structure and tags for creating an HTML document or web page. At this point, we should understand how HTML tags work at a basic level to form an HTML document. In our next article, we will talk about another important aspect of html tags and elements which will be Block and inline element.
Thank you. I hope this was helpful, see you in our next article.