HTML Paragraphs

<span style="font-family: inherit;"><span style="background-color: white;">The HTML </span><strong style="background-color: white; box-sizing: inherit;"><p></strong><span style="background-color: white;"> element defines a </span><strong style="background-color: white; box-sizing: inherit;">paragraph.</strong></span><br /> <strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><br /></span></strong> <strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-weight: normal;">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></strong><br /> <strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-weight: normal;">This is another paragraph.</span><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></strong><br /> <strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></strong> <span style="font-family: inherit;"><strong style="background-color: lightpink; box-sizing: inherit;">Note:</strong><span style="background-color: lightpink;"> Browsers automatically add some white space (a margin) before and after a paragraph</span></span><span style="background-color: lightpink; font-family: inherit;">.</span><br /> <span style="background-color: lightpink; font-family: inherit;"><br /></span> <span style="background-color: lightpink; font-family: inherit;"><br /></span> <br /> <h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;">HTML Display:- </span></h2> <div> <div style="background-color: white; box-sizing: inherit;"> <span style="font-family: inherit;">You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed.</span></div> <div style="background-color: white; box-sizing: inherit;"> <span style="font-family: inherit;"><br /></span></div> <div style="background-color: white; box-sizing: inherit;"> <b><span style="font-family: inherit;">For </span>Example<span style="font-family: inherit;"> :- </span></b></div> <div style="background-color: white; box-sizing: inherit;"> <b><span style="font-family: inherit;"><br /></span></b></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFi3UmM6A66T_mSJTkeuncZgshKrAn641yMHgdXEY75o_Zoy2ODt3v5VA4yP6q4f2jGsKKUZQTAjzd3ECx-hWsKUMeRynNTC_NJGLfKcOGMbIWWooOiAkf-y1osX355Q-PkD7AFjGxm-Q/s1600/paragraph.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="532" data-original-width="725" height="469" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFi3UmM6A66T_mSJTkeuncZgshKrAn641yMHgdXEY75o_Zoy2ODt3v5VA4yP6q4f2jGsKKUZQTAjzd3ECx-hWsKUMeRynNTC_NJGLfKcOGMbIWWooOiAkf-y1osX355Q-PkD7AFjGxm-Q/s640/paragraph.png" width="640" /></a></div> <h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;">Don't Forget the End Tag:-</span></h2> </div> <div> <span style="font-family: inherit;"><br /></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;">Most browsers will display HTML correctly even if you forget the end tag.</span></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;"><b>Example :-</b></span></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;"><b><br /></b></span></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">This is a paragraph.</span><br /> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">This is another paragraph.</span></div> <div> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;">The example above will work in most browsers, but do not rely on it. it is bad programming practice.</span></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div> <div> <h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;">Line Breaks in HTML:-</span></h2> </div> <div> <span style="font-family: inherit;"><span style="background-color: white;">The HTML </span><strong style="background-color: white; box-sizing: inherit;"><br></strong><span style="background-color: white;"> element defines a </span><strong style="background-color: white; box-sizing: inherit;">line break</strong><span style="background-color: white;">. </span><span style="background-color: white;">Use <b><br></b> if you want a new line without starting a new paragraph.</span></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div> <div> <span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>br<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">a paragraph</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>br<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">with line breaks.</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></div> <div> <span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="font-family: inherit;"><br /></span></span></span></div> <div> <div style="background-color: white; box-sizing: inherit;"> <span style="font-family: inherit;">The <br> tag is an empty tag, which means that it has no end tag.</span></div> <div style="background-color: white; box-sizing: inherit;"> <span style="font-family: inherit;"><b><br /></b></span></div> <h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;">The Poem Problem:-</span></h2> </div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">This poem will display on a single line</span></div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br /> <br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the sea.</span><br /> <br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br /> <br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  Oh, bring back my Bonnie to me.</span><br /> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div> <h2> <span style="font-family: inherit; font-size: x-large;">Solution:- </span></h2> <div> <span style="font-family: inherit; font-size: x-large;"><br /></span></div> <h3> <span style="font-family: inherit; font-size: large;"><pre> tag in HTML:-</span></h3> <div> <span style="font-family: inherit;"><span style="background-color: white;">The HTML <pre> element defines preformatted text. </span><span style="background-color: white;">The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. in <pre> tag text print as it is written in <pre> tag.</span></span></div> <div> <br /></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>pre<span style="box-sizing: inherit; color: mediumblue;">></span></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br /> <br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the sea.</span><br /> <br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br /> <br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  Oh, bring back my Bonnie to me.</span><br /> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/pre<span style="box-sizing: inherit; color: mediumblue;">></span></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div> <h2> Reference tag in HTML:-</h2> <span style="background-color: white;"><span style="font-family: inherit;">s1school' tag reference contains additional information about HTML elements and their attributes.</span></span><br /> <span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span> <br /> <table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 1103px;"><tbody style="box-sizing: inherit;"> <tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top;">Tag</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr> <tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_p.asp" style="background-color: transparent; box-sizing: inherit;"><p></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Defines a paragraph</td></tr> <tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_br.asp" style="background-color: transparent; box-sizing: inherit;"><br></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Inserts a single line break</td></tr> <tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_pre.asp" style="background-color: transparent; box-sizing: inherit;"><pre></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Defines pre-formatted text</td></tr> </tbody></table> <br /><div> <h3 style="background-color: white;"> <div style="font-size: medium; font-weight: normal;"> IF you have any question about this lecture you can comment blow. feel free to contact me.</div> <div style="font-size: medium; font-weight: normal;"> you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div> </h3> </div>

HTML Paragraphs

The HTML  <p>  element defines a  paragraph. < p > This is a paragraph. < /p > < p > This is another paragraph. ...

Read more »

HTML Attributes

<span style="background-color: white;"><span style="font-family: inherit;">Attributes provide additional information about HTML elements.</span></span><br /> <span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span> <br /> <ul style="background-color: white; box-sizing: inherit;"> <li style="box-sizing: inherit;"><span style="font-family: inherit;">All HTML elements can have <b style="box-sizing: inherit;">attributes</b></span></li> <li style="box-sizing: inherit;"><span style="font-family: inherit;">Attributes provide <b style="box-sizing: inherit;">additional information</b> about an element</span></li> <li style="box-sizing: inherit;"><span style="font-family: inherit;">Attributes are always specified in <b style="box-sizing: inherit;">the start tag</b></span></li> <li style="box-sizing: inherit;"><span style="font-family: inherit;">Attributes usually come in name/value pairs like: <b style="box-sizing: inherit;">name="value"</b></span></li> </ul> <div> <h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;"> <span style="font-size: x-large;">Title Attribute:- </span></h2> </div> <div> <span style="font-family: inherit;"><span style="background-color: white;">Here, a </span><strong style="background-color: white; box-sizing: inherit;">title</strong><span style="background-color: white;"> attribute is added to the </span><strong style="background-color: white; box-sizing: inherit;"><p></strong><span style="background-color: white;"> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph.</span></span></div> <div> <span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div> <div> <span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> title<span style="box-sizing: inherit; color: mediumblue;">="I'm a tooltip"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">This is a paragraph.</span><br /> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></div> <div> <span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><b><br /></b></span></span></div> <div> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"></span></span><br /> <h2 style="background-color: white; box-sizing: inherit; color: black; margin: 10px 0px;"> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> <span style="font-family: inherit; font-size: x-large;">href Attribute:-</span></span></span></h2> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> </span></span> <br /> <div style="color: mediumblue;"> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="font-family: inherit;"><span style="background-color: white; color: black;">HTML links are defined with the </span><strong style="background-color: white; box-sizing: inherit; color: black;"><a></strong><span style="background-color: white; color: black;"> tag. The link address is specified in the </span><b style="background-color: white; box-sizing: inherit; color: black;">href</b><span style="background-color: white; color: black;"> attribute.</span></span></span></span></div> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> </span></span> <br /> <div style="color: mediumblue;"> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="font-family: inherit;"><span style="background-color: white; color: black;"><br /></span></span></span></span></div> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> </span></span> <br /> <div style="color: mediumblue;"> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>a<span style="box-sizing: inherit; color: red;"> href<span style="box-sizing: inherit; color: mediumblue;">="https://www.w3schools.com"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black; font-family: "consolas" , "courier new"; font-size: 16px;">This is a link</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/a<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></span></div> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> </span></span> <br /> <div style="color: mediumblue;"> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span></div> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> </span></span> <div style="color: mediumblue;"> <h2 style="background-color: white; box-sizing: inherit; color: black; margin: 10px 0px;"> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> <span style="font-family: inherit; font-size: x-large;">Size Attributes:-</span></span></span></h2> </div> <span style="box-sizing: inherit;"><span style="box-sizing: inherit;"> <div> <span style="color: mediumblue; font-family: inherit;"><span style="background-color: white; color: black;">HTML images are defined with the </span><strong style="background-color: white; box-sizing: inherit; color: black;"><img></strong><span style="background-color: white; color: black;"> tag. </span></span>The filename of the source (src), and the size of the image (width and height) are all provided as attributes.</div> <div> <br /></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">img</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> src<span style="box-sizing: inherit; color: mediumblue;">="s1school.jpg"</span> width<span style="box-sizing: inherit; color: mediumblue;">="104"</span> height<span style="box-sizing: inherit; color: mediumblue;">="142"</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="background-color: white;"><span style="font-family: inherit;">The image size is specified in pixels: width="104" means 104 screen pixels wide. </span></span></div> <div> <span style="font-family: inherit;">You will learn more about images and the <img> tag later in this tutorial.</span></div> <div> <span style="font-family: inherit;"><br /></span></div> <div> <span style="font-family: inherit;"><br /></span></div> <div> <h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;"><span style="font-family: inherit;">alt Attribute</span><span style="font-weight: 400;">:-</span></span></h2> </div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">The </span><strong style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">alt</strong><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"> attribute specifies an alternative text to be used, when an image cannot be displayed. </span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.</span></div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">img</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> src<span style="box-sizing: inherit; color: mediumblue;">="s1school.jpg"</span> alt<span style="box-sizing: inherit; color: mediumblue;">="s1school.jpg"</span> width<span style="box-sizing: inherit; color: mediumblue;">="104"</span> height<span style="box-sizing: inherit; color: mediumblue;">="142"</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <h3> <b><span style="font-size: large;">suggestion:- </span></b>Use Lowercase Attributes </h3> <div> <span style="font-family: inherit;"><span style="background-color: white;">The HTML5 standard does not require lowercase attribute names. </span><span style="background-color: white;">The title attribute can be written with uppercase or lowercase like </span><strong style="background-color: white; box-sizing: inherit;">title</strong><span style="background-color: white;"> or </span><strong style="background-color: white; box-sizing: inherit;">TITLE</strong><span style="background-color: white;">. </span></span></div> <div> <span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div> <div> <span style="background-color: #ffffcc; font-family: "verdana" , sans-serif; font-size: 15px;">At s1school we always use lowercase attribute names.</span></div> <div> <span style="background-color: #ffffcc; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div> <h3> <span style="font-family: inherit; font-size: large;">Suggestion:-  </span>Quote Attribute Values</h3> <div> <span style="background-color: white;"><span style="font-family: inherit;">The HTML5 standard does not require quotes around attribute </span></span><span style="background-color: white; font-family: inherit;">values. </span><span style="background-color: white; font-family: inherit;">The </span><strong style="background-color: white; box-sizing: inherit; font-family: inherit;">href</strong><span style="background-color: white; font-family: inherit;"> attribute,</span></div> <div> <span style="background-color: white; font-family: inherit;">demonstrated above, can be written as:- </span></div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">a</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> href<span style="box-sizing: inherit; color: mediumblue;">=https://www.s1school.blogspot.com</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="font-family: inherit;"><span style="background-color: white;">Sometimes it is </span><strong style="background-color: white; box-sizing: inherit;">necessary</strong><span style="background-color: white;"> to use quotes. This example will not display the title attribute correctly, because it contains a space. </span>Using quotes are the most common. Omitting quotes can produce errors. </span></div> <span style="font-family: inherit;">At W3Schools we always use quotes around attribute values.</span><div> <span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> title<span style="box-sizing: inherit; color: mediumblue;">=About </span>s1school</span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span><br /> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span> <br /> <h2> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: inherit; font-size: x-large;"><br /></span></h2> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: inherit; font-size: x-large;"></span><br /> <h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;">what is Single or Double Quote</span><span style="font-family: "segoe ui" , "arial" , sans-serif;"><span style="font-size: 30px;">s?</span></span></h2> </div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">Double quotes around attribute values are the most common in HTML, but single quotes can also be used.</span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:-</span></div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> title<span style="box-sizing: inherit; color: mediumblue;">='WEb "designer" ali'</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> or </div> <div> <br /></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> title<span style="box-sizing: inherit; color: mediumblue;">="web 'designer' ali"</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div> <div> <h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;"> <span style="font-family: inherit; font-size: x-large;">HTML Attributes:-</span></h2> </div> <div> <span style="font-family: inherit; font-size: x-large;"><br /></span></div> <div> <table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 867px;"><tbody style="box-sizing: inherit;"> <tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 129px;">Attribute</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr> <tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">alt</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies an alternative text for an image, when the image cannot be displayed</td></tr> <tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">disabled</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies that an input element should be disabled</td></tr> <tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">href</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the URL (web address) for a link</td></tr> <tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">id</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies a unique id for an element</td></tr> <tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">src</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the URL (web address) for an image</td></tr> <tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies an inline CSS style for an element</td></tr> <tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">title</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies extra information about an element (displayed as a tool tip)</td></tr> </tbody></table> </div> <div> <br /></div> <div> <span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">A complete list of all attributes for each HTML element, is listed in our: <a href="https://s1school.blogspot.com/2017/07/html-attribute-reference.html">attributes reference.</a></span><br /> <br /> <br /> <br /> <br /> <h3> <div style="font-size: medium; font-weight: normal;"> IF you have any question about this lecture you can comment blow. feel free to contact me.</div> <div style="font-size: medium; font-weight: normal;"> you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div> </h3> </div> </span></span></div>

HTML Attributes

Attributes provide additional information about HTML elements. All HTML elements can have  attributes Attributes provide  additional in...

Read more »

HTML Attribute Reference

<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;"> </h2>

HTML Attribute Reference

Read more »