Table of contents
HTML stands for Hypertext Markup Language. It is a standard markup language for giving a static skeleton to web applications and websites. HTML acts as a fundamental building block for creating a complete website. It is used by every website we open through a web browser, including social networks and other websites. A simple HTML code page, generated with an HTML structure editor, can be found underneath any website.
The fundamental components of websites all around the world are HTML, CSS, and JavaScript. Consider an HTML page to be the skeleton of a webpage, with CSS serving as the skin and JavaScript serving as the brains.
Brief History of HTML
HTML is a markup language that is always changing thanks to version updates. Each version has enabled its user to construct web pages in a much simpler and more attractive manner,as well as to develop very effective websites, long before their new standards and specifications are implemented.
In 1993, HTML 1.0 was released to distribute content that could be viewed and accessed by web browsers.
Then comes HTML 2.0, which was released in 1995 and incorporates all the characteristics of HTML 1.0 as well as a few extra features.
After that, Dave Raggett presented a new version of HTML 3.0. It contained updated HTML capabilities that gave developers more effective tools for creating web pages.
Next is HTML 4.01, which is widely used and was a popular HTML version before HTML 5.0, which was just launched and is currently in use everywhere. One could consider HTML 5 to be an expanded version of HTML 4.01, which was released in 2012.
Basics about HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="this is description">
<meta name="keywords" content="html, web-development">
<meta name="robots" content="Index, follow">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
</body>
</html>
<! DOCTYPE html>: This refers to the document type i.e. HTML.
<html
lang="en">: It specifies the web page language will be English.meta tags are generally used for SEO(Search engine optimization).
<meta
charset="UTF-8">: charset attribute declares the page's character encoding i.e. UTF-8.<meta
http-equiv="X-UA-Compatible" content="IE=edge">: this attribute is used when we believe internet explorer will attempt to render a website in an invalid view.<meta
name="viewport" content="width=device-width, initial-scale=1.0">: this is used for making our web page look responsive on different devices.<meta
name="description" content="this is description">: to describe our webpage we can use this attribute.<meta
name="keywords" content="html, web-development">: this attribute is used for search keywords by users so that the web page will rank in SEO.<meta
name="robots" content="Index, follow">: this attribute is used so that our website go visible in searches.<link rel="stylesheet" href="style.css" />: This tag is used to link stylesheet or any file or javascript file and many others.
<title>Document</title>: Title tag is used to give the title to our web page.
HTML Tags
Heading Tag
There are six heading tags from h1 to h6.
syntax: <h1>....</h1>
Paragraph
Syntax: <p>....</p>
for generating random paragraph we can use
lorem ipsum.Image and anchor tag
Syntax: <img src="..." alt="...">, <a href="....">....</a>
Lists
for unordered list <ul> .... </ul>
for ordered list <ol> .... </ol>
Table
Syntax: <table> ... </table> to create table.
Forms
Syntax: <form> ... </form>
Formatting
Making text bold, italic, underline and many other designs to text with the help of HTML.
Inline and Block elements
An inline element does not start on a new line and takes up as much width as necessary.
example:
<a>, <em>, <span>, <img>, <button>, and many others.A block-level element always starts on a new line and the browser automatically adds some space (a margin) before and after the element.
example:
<p>, <div>, <h1>....<h6>, and many others.Class and id attribute
The id attribute is a unique identifier that is used to specify a particular element. It is used by CSS and javascript to perform certain tasks for a unique element. In CSS the id attribute is written using the "#" symbol followed by id.
The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on the HTML elements. The class name in the CSS stylesheet uses the "." symbol followed by the class name.
HTML entities
For the special character which we want to use for that, we need a special tag to display on our web page.
Semantic elements
A semantic clearly describes its meaning to both the browser and the developer.
non-semantic elements: it tells nothing about its content
example:<div>, <span>.semantic elements: it clearly defines its content
example:<form>, <table>, <article>, <details>, <header>, <nav>, <section>, <aside>, <article>, <footer>.iframe
A nested webpage is shown using an HTML Iframe (a webpage within a webpage). It is also known as an "inline frame" since the HTML "iframe" tag defines one.
An HTML iframe inserts a different document into the rectangular space of the active HTML document.
syntax: <iframe width="" height="" src="URL" title=""></iframe>