Tools
Tools: Understanding HTML Tags and Elements
2026-01-29
0 views
admin
Content List ## What HTML is and why we use it? ## What is HTML tags? ## HTML element & element vs tag ## Self closing (Void) element ## Block vs Inline elements & commonly used elements ## Block Level Element ## Inline Level Element HTML stand for Hyper Text Markup Language. In that hyper text refere to system that provide a link to access other pages on web, markup means use of annotate text give instruction to browser how to structure and display page content. Brower can not read html like humans do it need a instruction to differentiate between instruction and the actual content. Html provide this information so browser can understand which part of the content is display as heading and which part is the paragraph or links without that browser show all information as a big paragpah of text. Think, in building a house the blueprint and fram of the house is html provide the initial structre. In human body the skeleton is the html not skin and mucles which provide styling (css) and interactibity (js) to web page. In html tags are the commands that tells browswer how to handle specific piece of content. It is a fundamental building block it used to structre and apply content formating on web pages. Every tag contain tree parts open angle bracket <, tag name like head, body, h1, and close angle bracket > this tree thing complete every tag like <head>. Most of the tags in html comes with pair, opening and closing tags which enclose content. Closing tag contain / wich differentiate closing tag with opening tag. without a closing tag, browser get confused. If you open a heading tag and put heading content on to it but if you don't close it broswer assume all content after that are the part of heading and all content print like a big giant heading every thing big and bold. Closing tag tell borswer "stop" instruction heading ends right here. Think its like a putting object into box. You open the box lid (Opening tag), put object into that (content) and close the box lid (Closing tag). Most of the peoples assume the tags and elemetns are interchangable but there are slightly technical difference here. Element is the package of the tree main thinks: Opening Tag: start command. It consist element name wrap with the opening and closing angle bracket <p> tells the browser i'm starting paragraph now. Content: this is the actual text, image, and link you want to user see. Closing Tag: stop command. it has same configuration like start command with forward slash / make the difference </p> and tell the browser this here paragraph ends. To understand difference between element and tag think element like a sandwich: In the world of HTML there are the some tags have opening and closing becase thay wrap around the content to tell the broswer where this specific content ended. What if tag is the content. There are type of tags in html which only have one tag no need to close it because this type of tags are work as content not wrap around content. Think its like a sticker or stamp you don't need to open sticker, put someting in it, and close it. You just directly put it down. These element called self closing Element and Void Element, these some major elements: In the older version of the html you might see the self closing tags written with forward slash at end like <img/> but in the latest version of the html in HTML5 the slash is optional and usually omitted. Think as your webpage is the grid where every element is box. There are two main ways to arrange them: This type of elements are always start on new line and take up full width. It stratch out to left and right as far as it can. Think these as bricks when you stack these bricks each other it always start new layer. You can put two bricks side by side in same verticle space without some extra support. There are some common example of block level elements: An inline elements does not start on new line it only takes as much width as necessary for its content. it sits "in line" with elements around it. Think it like a marker. If you using marker to highlith a word in sentant it does not break the sentace in apart, the highlight just site right there on top of the word. There are common inline words: Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK:
<section> <h1>Hello world</h1>
</section> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
<section> <h1>Hello world</h1>
</section> CODE_BLOCK:
<section> <h1>Hello world</h1>
</section> CODE_BLOCK:
<header> <h1>Logo</h1> <ul> <li>About</li> <li>Contact</li> </ul>
</header> <main>Block level elements</main> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
<header> <h1>Logo</h1> <ul> <li>About</li> <li>Contact</li> </ul>
</header> <main>Block level elements</main> CODE_BLOCK:
<header> <h1>Logo</h1> <ul> <li>About</li> <li>Contact</li> </ul>
</header> <main>Block level elements</main> COMMAND_BLOCK:
<b>Lorem Ipsum</b> is simply dummy text of the <i>printing</i> and typesetting industry. <strong>Lorem Ipsum</strong> has been the <em>industry's</em> standard dummy text ever since the <time>1500s<time>, when an unknown printer took a <span>galley of type and scrambled</ span> it to make a type <a>specimen book</a>. Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK:
<b>Lorem Ipsum</b> is simply dummy text of the <i>printing</i> and typesetting industry. <strong>Lorem Ipsum</strong> has been the <em>industry's</em> standard dummy text ever since the <time>1500s<time>, when an unknown printer took a <span>galley of type and scrambled</ span> it to make a type <a>specimen book</a>. COMMAND_BLOCK:
<b>Lorem Ipsum</b> is simply dummy text of the <i>printing</i> and typesetting industry. <strong>Lorem Ipsum</strong> has been the <em>industry's</em> standard dummy text ever since the <time>1500s<time>, when an unknown printer took a <span>galley of type and scrambled</ span> it to make a type <a>specimen book</a>. - What is HTML and why we using it
- What is HTML tags
- What is elements & elements vs tags
- Self closing elements
- Inline and blcok level elements - Opening Tag: start command. It consist element name wrap with the opening and closing angle bracket <p> tells the browser i'm starting paragraph now.
- Content: this is the actual text, image, and link you want to user see.
- Closing Tag: stop command. it has same configuration like start command with forward slash / make the difference </p> and tell the browser this here paragraph ends. - Opening tag is the top slice of bread.
- Content is the middle part (cheez, butter, and jelly) of the sandwich.
- Closing tag is the bottom slice of bread
- Element is the entire sandwich, you can't have sandwich without all part working together. - <img>: used to put image on page don't put text on it.
- <br>: a simple line break like enter in keyboard.
- <hr>: a horizontal rule, line acrose the page.
how-totutorialguidedev.toaiml