We used HTML to create webpage for our website. It use markup for formatting text and provide meaning behind the text.
What Is HTML
HTML is created under WWW. it is created to provide proper structure to the document so the browser understand how to render the text on screen . Every things are text but HTML helps to give meaning of the different text like for image , there is img tag, for paragraph there is p tag , for bold and big heading/ main title of webpage , There is h1 tag , for link which is most important on the basis of which it is also called HyperText , There is a tag for it.
For every thing there are markup which is called Tag in HTML. Tags are used to define proper content that need to show on the screen . In HTML5 There are something called Semantic Tag. Semantic means provide meaning and structure which is easier to understand for both Browser and Developer. It is very important for SEO, screen readers and other tools to access and interpret with the content of webpage.
Some Semantic Tags are :
a . header : to show heading of website. <header></header>
b . nav : to show navigation links on website . <nav></nav>
c . main : it is used for main content of webpage . <main></main>
d . aside : it is used for secondary info or additional information for webpage or mainly for sidebar . <aside></side>
e . section ,article : section is used for section of page like About section, C.T.A. section, Testimonial section and article is used for mainly define one product , like on ecommerce website . the detail page for single product there article Tag is used for one product. <section></section> and <article></article>
f. footer : footer is used for defining footer of website which is mainly at the bottom of page . it includes info about copyright . links of some extra resources . <footer></footer>
About Tag , Content, Element
from above section , We say Tag is used for markup the text. Tag has opening and closing part. The starting of Tag begins by <Tagname> and the ending part is </TagName>.
Content itself got meaning that the text which is written inside the between Opening Tag and Closing Tag is known as Content of Tag. on relation It is Child of Tag.
Element is Overall structure of Tag with content. When Tag is used in webpage then it is called element . like paragraph we use p tag and when we used in code and it display on browser then we called it paragraph element or p tag.
By above scenario we can say There are few Tags which do not contain content between them so that is called void tag or self closing tag .
1 . Paired Tag : It always comes with opening and closing tag so it is called paired tags like <p></p>, <strong></strong>, <date></date>, <code></code>, <div></div>.
2 . unpaired /empty/ void : it has only starting tag like <img />, <br />, <hr />, <input />. the slash at end gives developer about the the tag is self closed which makes developer easier to understand code. so always used slash at the end of empty tag . it is good for understanding purpose.
Below is image showing HTML Code with most used Tag and Its output on browser.
Block and Inline Elements
Everything , every tag is displayed like rectangular box on browser screen. by default some elements are taking full width or some elements are taking content-size width. on the basis of that Elements are classified into two types :
a. Block Level Element : These are the elements display as full width on the screen .The new Element comes after these type of elements into new line. examples like div , p, h1-h6, nav, ul, li, ol, br, hr …
b. Inline Level Element : These are the elements who took only content-size width. and the another inline element comes side by side . examples : img, a, button,span,input, label,strong,em,i…
Behind the Scenes
We know that browser can understand HTML so the browser engine got C++ written code who understand the HTML and convert into proper structure that can be rendered on screen the Parsed HTML is called DOM which can be selected , modified and updated by using Javascript.
Summary
HTML is HyperText Markup Programming Language that is used for creating structure of webpage . It is used for defining the content that can be shown on the screen by using tags
