HTML: And Why It’s a Must Use.

What’s a Website?

As defined by Wikipedia, a website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and Wikipedia. All publicly accessible websites collectively constitute the World Wide Web. The web pages are written chiefly in HTML.

What’s HTML?

As per MDN, HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content viewed on websites. Other technologies besides HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/behavior (JavaScript). HTML on it’s own is not a programming language, not ever! HTML uses Semantic HTML elements to give structure to the web.

What’s HTML Semantics?

According to Free Code Camp, Semantic HTML Elements are those that clearly describe their meaning in a human-readable and machine-readable way. Semantic HTML Elements are made up of two categories, Container Tags and Empty Tags.

What are HTML Empty Tags?

HTML elements with no content are called empty elements. These are, but not limited to:

<p> — It gives a paragraph to a text

<br/> — Line break, it creates a new line whenever it’s used.

<img/> — Insert an image into a webpage.

<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.

<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.

<col> — The <col> tag in HTML is used to set the column properties for each column within a <colgroup> tag. This tag is used to set the style property to each column.

<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.

<hr> — A thematic break between paragraph-level components is represented by the <hr> element. It looks like a line

<input> — This empty element is used to create interactive controls for web-based applications and forms, for accepting the information from the user such as an address, name, phone number, etc, depending on a variety of types of input data and control widgets are available.

<link> — The HTML element <link> is used to establish a connection between the current content and an external resource.

<meta> — The <meta> HTML element represents metadata i.e., information of a information

<param> — The <param> tag in HTML is used to define a parameter for plug-ins which is associated with <object> element.

<source> — The <source> element is an empty element that provides various media resources for the <image>, <audio>, or <video> elements. It provides the same media material in several file formats to ensure compatibility with a wide variety of browsers, as image and media file formats are supported by the browsers differently.

<wbr> — The <wbr> tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the used word is too long and there are chances that the browser may break lines in the wrong place for fitting the text.

<track> — The <track> tag specifies text tracks for media components audio and video. This part is employed to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in. The <track> element is an empty HTML element that is used as a child of the audio and video media components. It allows you to define timed text tracks (or time-based data), for example, to handle subtitles automatically.

<keygen> — It is used to specify a key-pair generator in a HTML form. A private and public key will be generated. The private will be saved in the browser local key storage while a public key will be sent to the server.

What are HTML Container Tags?

Container tag consists of opening tag+content+closing tag. They are used to enclose texts and images. Container tag always comes with content. These include, but not limited to:

<h1> to <h6></h1>to</h6> — This is meant for headings. H1 is the main heading, H2 is secondary, etc.

<p></p> — It create a new paragraph.

<div></div> — A container for a block of content

<span></span> — A container for inline content, such as content inside a paragraph

<em></em> — Gives the contained text emphasis (usually as italics).

<strong></strong> — It gives a bold text

<title></title> — It gives a document a title.

<head></head> — It contains important information about the document which are machine-readable.

<a></a> — This create a link that can connect to a another webpage

<section></section> — defines the section of documents such as chapters, headers, footers or any other sections.

<ul></ul> — creates an unordered list

<ol></ol> — creates an ordered list

<li></li> — creates bullet list

<footer></footer> — This is a semantic tag that defines the footer of a document.

<aside></aside> — the tag defines some content aside from the content it is placed in.

<code></code> — The <code> tag is used to define a piece of computer code.

<textarea></textarea> — it allows multi-line text input. It commonly used in a form.

<th></th> — The <th> tag defines a header cell in an HTML table.

<progress></progress> — The <progress> tag represents the completion progress of a task.

<blockquote></blockquote> — The <blockquote> tag specifies a section that is quoted from another source.

<button></button> — The <button> tag defines a clickable button. It is commonly used after filling a form in a website.

<legend></legend> — The <legend> tag defines a caption for the <fieldset> element.

<main></main> — The <main> tag defines the main content of a document.

<option></option> — The <option> tag defines an option in a select list.

<script></script> — The <script> tag is used to embed a client-side script (JavaScript).

<svg></svg> — The <svg> tag defines a container for SVG graphics.

That’ll be all, thanks!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store