HTML5: The Backbone of a Website

Share this Content
HTML

HTML stands for HyperText Markup Language. Hypertext means a machine-readable text which is hyperlinked by the web browser and markup means to structure the webpage in a specific format. So, HTML is a language that allows users to structure, organise, improve the appearance of a website and link data, text, images, videos on the internet. HTML is the standard markup language for creating a webpage. HTML is the skeleton of a webpage. HTML code is also known as Markup. HTML was invented by Tim Berners Lee in 1991 and initially released in 1993. HTML5 is the latest version of HTML released in 2017. HTML can be embedded with CSS and JavaScript.

HTML Document

HTML documents can be written in Notepad. We can also use different IDE such as Visual Studio Code, Sublime Text IDE, Notepad++, Eclipse, Kite, PyCharm, Atom IDE, AWS Cloud9, Ruby Mine, Light Table, PHP etc. We always have to save the HTML document using the .html file extension. There is mainly two part of an HTML document – Title and Body. The title part is responsible for the title of the webpage and the body part is responsible for the content of the webpage.

METADATA:

Metadata is data about HTML documents. Metadata is stored in a head tad. Metadata typically define the document title, character set, styles, scripts, viewport, description, keyword, HTTP equivalent of a webpage etc.

HTML TAGS AND ELEMENTS:

HTML consists of a series of elements. HTML elements consist of three parts – starting tag, content, ending tag. Every starting and ending tag starts and ends with angular brackets (< >) and the ending tag has an extra slash (/) at the beginning. Contents are written in between starting and ending tags. HTML tags are not case sensitive.

Some HTML elements do not have end tags and content, they are called Empty Tags or Empty Elements. Some HTML tags also consist of some attribute that is used to provide additional information about the content. Some HTML tags are used as containers of additional details of the content of a webpage, they are known as Container Tags.

There are two types of HTML tags as Semantic Tags and Non-semantic Tags. Semantic tags clearly describe their meaning to both the browser and the developer. The non-semantic tag does not describe its meaning to the browser and the developer.

There are also two another types of HTML elements such as Inline Element and Block Element. Inline element takes content or text as a line, e.g., <p>, <div>, <li>, <th>, <tr> etc. Block elements takes content or text as a block, e.g., <span>, <em>, <strong>, <b>, <i>, <u>, <a>, <img>, <table>, <audio>, <video> etc.       

Subscribe to Tech Break

HTML ENTITIES:

HTML entities are used to write some symbolic characters, special characters and include some irregular space in the content of a webpage.

ID AND CLASS:

ID and Class are used to nominate one or more than one element in an HTML document. ID is worked as an identifier that can only be used a single time in a particular Html document. Class is worked as a specifier of one or more than one element in a particular HTML document. We can only use a single ID to a particular element whereas we can use multiple classes to a particular element. ID and class are used to modify and decorate some divisions of the webpage.

WEB BROWSERS:

There are various web browsers such as Google Chrome, Mozilla Firefox, Opera Mini, Microsoft Edge, The Onion Router (TOR) etc. These web browsers are used to view webpages whereas HTML source code is not visible through the web browsers, only we can view the content and title of that webpage which is structured through HTML, CSS, JavaScript, Bootstrap. Whereas we can visit the source code of a webpage by right-clicking the webpage and selecting the view page source option from the drop-down menu. We can also use the ctrl+U shortcut for visiting the source code of a webpage.

VIEWPORT:

The viewport is an important part of HTML. The viewport is used to set the compatibility of a webpage concerning the user’s device.

SEARCH ENGINE OPTIMISATION (SEO):

Search Engine Optimisation (SEO) is a process of taking steps to help a website or webpage to link on different web browsers.

DIFFERENT HTML TAGS WITH PURPOSE :

TagPurpose
<!DOCTYPE>declaring the version of HTML in which the webpage is written
<html>……</html>declaring the starting and ending of html document
<head>……</head>declaring the container of meta and title tag of webpage
<meta…………>Declaring the metadata of webpage (container tag)
<title>……</title>declaring the title of webpage
<body>……</body>declaring the content of webpage
<h1 or h2 or h3 or h4 or strong texth5 or h6 >……</h1 or h2 or h3 or h4 or h5 or h6>  declaring the heading of different size
<p>……</p>declaring a block of paragraph
<span>……</span>declaring an inline paragraph
<br>declaring single line break (empty tag)
<hr>declaring horizontal rule (empty tag)
<pre>……</pre>declaring pre-formatted text
<b>……</b>declaring bold text
<u>……</u>declaring underlined text
<i>……</i>declaring italic text
<strong>……</strong>declaring important text
<em>……</em>declaring emphasized text
<section>……</section>declaring a section in a document
<img>……….use to embedded image from the source
<a>……</a>embedding another document as hyperlink from the source (anchor tag)
<ol>……</ol>declaring ordered list
<ul>……</ul>declaring unordered list
<li>……</li>declaring list item
<table>……</table>inserting a table
<thead>……</thead>declaring container of heading part of table
<tbody>……</tbody>declaring container of body part of table
<caption>……</caption>declaring table caption
<tr>……</tr>specifies table row
<th>……</th>declaring table heading
<td>……</td>declaring table data
<abbr>……</abbr>declaring an abbreviation
<centre>……</centre>declaring text in centre alignment
<left>……</left>declaring text in left alignment
<right>……</right>declaring text in right alignment
<justify>……</justify>declaring text in justify alignment
<col>……</col>specifies table column from a column group
<colgroup>……</colgroup>specifies a column group in table
<details>……</details>declaring additional details hide or show as per user action
<summary>……</summary>declaring summary of additional details of webpage
<article>……</article>declaring independent, self-contained content
<div……>……</div>declaring a division
<header>……</header>declaring header or introductory part of webpage
<footer>……</footer>declaring footer or conclusion part of webpage
<nav>……</nav>defines group of navigation elements throughout webpage
<link…………….>defining other file links embedded to HTML file
<q>……</q>declaring quotation
<input………..>takes input from user using webpage (container tag)
<label>……</label>creates label for particular input text
<textarea>…… </textarea>creates some space to write in form
<button…………>…… </button>creates a button in webpage
<select>……</select>creates selecting option for input form
<form>……</form>creates a form in webpage
<mark>……</mark>use to highlight specific text
<audio>……..use to embed audio file from source
<video>……use to embed video file from source
<time……>……</time>declaring date and time
<!–……………..–>declaring some comment which is hidden in webpage

DIFFERENT HTML ATTRIBUTES WITH PURPOSE :

ATTRIBUTESPURPOSE
langspecify the language of a webpage
charsetspecify character type of content of a webpage
namedefines the type of data in the backend
contentdeclares the characteristic of data
descriptiondeclares the content as a description of the webpage
keywordsdeclares the keywords of the webpage
robotsdecides whether the webpage will rank in browser or not
HTTP-equivprovides an HTTP header for the content attribute
hrefdeclares the source of the hyperlink
srcdeclares the source of image, audio and video
targetdeclares the target page opening a location
altdeclares an alternate text for an area
typespecifies the type of content
valuedeclares the content of the button
rowsdeclares a total number of row space in the text area
colsdeclares a total number of column space in the text area

Detailed Information About Front-End Web Development • Scientific World (scientyficworld.org)

Share this Content
Sayak Karar
Sayak Karar

Ethical Hacker | Coder | Blogger | Audio Editor | Orator | Web Developer

Articles: 5

Newsletter Updates

Join our email-newsletter to get more insights