Why HTML is a must for every website
Before we begin, let us first understand what HTML is. HTML stands for HyperText Markup Language. It is used to design web pages using the markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages. In short, HTML is the backbone of every website. It is used to create the structure of web pages that are displayed on the World Wide Web (www). It contains Tags and Attributes that are used to design the web pages. Also, we can link multiple pages using Hyperlinks.
Every websites we see on the web contains HTML elements. Examples includes, but not limited to, waiting.zuriboard.com. google.com, gmail.com, facebook.com, netlify.com, and so on.
Proper HTML page structure includes doctype declaration, HTML, head, title, and body elements. These are the essential building block elements upon which all web pages are created.
HTML Semantics
A semantic element clearly describes its meaning to both the browser and the developer, unlike non-semantic elements which tells us nothing about its content(e.g <div> and <span> ). Examples of semantic elements includes<form>, <table>,<aside>,<header>,<footer>,<main>,<nav>,<section>and <article> . These semantic elements are used to define different parts of a web page.
HTML Tags
These can be divided into two. Container tags and empty tage. Container tags are tags that have opening and closing tags while empty tags have no closing tag.
Container tags:
1. <p></p> tag: Paragraph tag
2. <div></div> : A container for a block of content
3.<span></span>: A container for in-line content, such as content inside a paragraph.
4. <em></em>: Gives the contained text emphasis (usually as italics).
5.<strong></strong>: Makes the contained text bold.
6.<a href = “document location”></a>: Link
7.<ol></ol>: Ordered (numbered) list
8. <ul></ul>Unordered (bulleted) list
9.<li></li>List item, must be nested inside a list element such as a <ol> or <ul>
10.<header></header>: Contains introductory content for a page (e.g., a banner), or a section of a page.
11.<nav></nav>:Contains navigation content, such as a website navigation menu.
12:<main></main>:Contains the main content of the web page.
13.<aside></aside>:Contains content that is tangentially related to the main content of the page (often this is presented in a sidebar).
14.<footer></footer>:Contains the footer of a page, or of a section of a page. Typically the footer contains information about the content, such as the author and a copyright statement.
15.<article></article>: Defines an article
16.<button></button>: Defines a clickable button
17.<html></html>: Defines the root of an HTML document
18.<table></table>: Adds a table
19. <h1></h1>: Main heading
20. <h2></h2>: Secondary heading
Empty tags:
1.<br />: Inerts a line break in a webpage wherever needed.
2.<img src =”image” alt=”text” />:Inserts an image into a web page.
3.<hr />: Inserts a horizontal line wherever needed in the webpage.
4.<input />: To input text, checkbox, radio button, and so on.
5.<link />: When we store our CSS in an external file this can be used to link external files and documents to the webpage and it is mainly used to link CSS files.
6.<meta>: Contains all metadata of the webpage. Metadata is the data about data and is described in the head tag.
7.<source>: When an external media source is needed to be included in the webpage. source tag is used to insert any media source like audio, video etc… in our webpage.
8.<param>: The <param> tag in HTML is used to define a parameter for plug-ins which is associated with <object> element. It does not contain the end tag.
9.<area>:It is used to map a portion of an image to make it clickable by the end-user. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag.
10.<base>:For all relative URLs in a document, the base URL is specified to use with the <base> element. Only one <base> element can be used in a document.
11.<embed>:The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as flash animations.
12.<track>:The <track> tag specifies text tracks for media components audio and video.
13.<wbr>:The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
14.<col>:The <col> HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
