Search the Community
Showing results for tags 'p'.
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph. Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line between the two paragraphs. See this example: <p>This is first paragraph.</p> <p>This is second paragraph.</p> <p>This is third paragraph.</p> Output: This is first paragraph. This is second paragraph. This is third paragraph. Space inside HTML Paragraph If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one. <p> I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. </p> <p> Look, I put here a lot of spaces but I know, Browser will ignore it. </p> <p> You cannot determine the display of HTML</p> <p>because resized windows may create different result. </p> Output: I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. Look, I put here a lot of spaces but I know, Browser will ignore it. You cannot determine the display of HTML because resized windows may create different result. As you can see, all the extra lines and unnecessary spaces are removed by the browser. How to Use <br> and <hr> tag with paragraph? An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use <br> with <p> element. Example: <!DOCTYPE html> <html> <head> </head> <body> <h2> Use of line break with pragraph tag</h2> <p><br>Papa and mama, and baby and Dot, <br>Willie and me?the whole of the lot <br>Of us all went over in Bimberlie's sleigh, <br>To grandmama's house on Christmas day. </p> </body> </html> Output: An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing use of <hr> tag with paragraph. Example: <!DOCTYPE html> <html> <head> </head> <body> <h2> Example to show a horizontal line with paragraphs</h2> <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph. </p> </body> </html> Output:
Adrian posted a topic in HTML TutorialHTML Elements An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements. Such as: <p> Hello world!!! </p> Example <!DOCTYPE html> <html> <head> <title>WebPage</title> </head> <body> <h1>This is my first web page</h1> <h2> How it looks?</h2> <p>It looks Nice!!!!!</p> </body> </html> Test it Now All the content written between body elements are visible on web page. Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag. Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc. Nested HTML Elements: HTML can be nested, which means an element can contain another element. Block-level and Inline HTML elements For the default display and styling purpose in HTML, all the elements are divided into two categories: Block-level element Inline element Block-level element: These are the elements, which structure main part of web page, by dividing a page into coherent blocks. A block-level element always start with new line and takes the full width of web page, from left to right. These elements can contain block-level as well as inline elements. Following are the block-level elements in HTML. <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>. Note: All these elements are described in later chapters. Example: <!DOCTYPE html> <html> <head> </head> <body> <div style="background-color: lightblue">This is first div</div> <div style="background-color: lightgreen">This is second div</div> <p style="background-color: pink">This is a block level element</p> </body> </html> Test it Now Output: In the above example we have used tag, which defines a section in a web page, and takes full width of page. We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element. Inline elements: Inline elements are those elements, which differentiate the part of a given text and provide it a particular function. These elements does not start with new line and take width as per requirement. The Inline elements are mostly used with other elements. <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>. Example: <!DOCTYPE html> <html> <head> </head> <body> <a href="https://www.adrianbahmani.com ">Click on link</a> <span style="background-color: lightblue">this is inline element</span> <p>This will take width of text only</p> </body> </html> Test it Now Output: Following is the list of the some main elements used in HTML: Start tag Content End tag Description <h1> ...... <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page. <p> This is the paragraph </p> This element is used to display a content in form of paragraph. <div> This is div section </div> This element is used to provide a section in web page. <br> This element is used to provide a line break. ( void element) <hr> This element is used to provide a horizontal line. (void element) توصیف تگ پایان محتوا تگ شروع برای ساخت عناوین و سرتیترهای صفحه استفاده می شود. </h1> ….. </h6> تگ های عنوانن (یا سرتیتر) هستند. <h1> ….. <h6> محتوا را به صورت پاراگراف نمایش می دهد. </p> این یک پاراگراف است <p> بخش یا قسمت جدیدی در صفحه ایجاد می کند. </div> ای یک بخش است <div> برای شکست خط فعلی استفاده می شود. (عنصر خالی) <br> یک خط افقی ترسیم می کند. (عنصر خالی) <hr>