HTML nesting rules_html/css_WEB-ITnose

Reference:

HTML tag nesting rules - MOOC

HTML tag nesting rules - Blog Park

WEB standard series - HTML element nesting

block elements:

address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1 ~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, etc.

Inline elements:

a, abbr, acronym ,b,bdo,big,br,cite,code,dfn,em,font,i,img,input,kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea , tt, u, var, etc.

Nesting rules:

Blocks can contain blocks and inlines, and inlines can only contain inlines

Block elements can contain inline elements or certain block elements, but inline elements cannot contain block elements. They can only contain other inline elements

Titles and paragraphs cannot contain blocks

There are several special block-level elements that can only contain inline elements and cannot contain block-level elements. These special tags are

h1, h2, h3, h4, h5, h6 , p, dt

Blocks and inline cannot be juxtaposed

Block-level elements are juxtaposed with block-level elements, and inline elements are juxtaposed with inline elements

Note:

li is a block-level element and can nest block-level elements (including ul).

Some tags have fixed nesting rules, such as ul contains li, ol contains li, dl contains dt and dd, etc.

cannot be nested. Please refer to the example of this tag in the w3School tutorial. </p> <p class="sycode"> Let me explain here, although you can use display to set block and inline, it is obviously not rigorous to define the nesting relationship. (I wonder if search engines will crawl CSS content?) </p> <p class="sycode"> </p> <p class="sycode"> <strong>Advanced knowledge</strong> </p> <p class="sycode"> WEB Standard Series-HTML Element Nesting</p> <p class="sycode"> Since I don’t have access to HTML5 now, I will keep </p> <p class="sycode"> <strong>Problems that may be caused by nesting errors</strong> </p> <p class="sycode"> </p> <li>Element start and end tag embedding set of errors, the page can be parsed normally in most browsers, but IE9 will have parsing errors </li> <li> Embedding elements such as <div> within the <p> element will cause parsing errors in all browsers </li> <li>Embedding <div> and other elements within <h1>~<h6> elements can be parsed by all browsers normally </li> <li>Embedding <a> elements within <a> elements will cause all browsers to Parsing error of the browser (a cannot nest interactive elements such as buttons and inputs) </li> <li>Inserting non-list sibling elements into list elements such as <li><dt><dd> will cause parsing errors in IE6IE7 </li> <p class="sycode"> Actually, it is not very reasonable to say parsing errors here. It should mean that the results parsed by the browser are inconsistent with the results we expect, but <strong> Any nested errors will not cause significant differences in page rendering. Big mistake. </strong> </p> <p class="sycode"> <strong> </strong> </p> <p class="sycode"> </p> <p class="sycode"> Finally: </p> <p class="sycode"> <strong>Although we can nest tags, in order To improve browser rendering efficiency, we should minimize nested tags and flatten them. < li > " >< div ></ div ></ a ></ h4 ></ li > </strong> </p> </ ul > <p class="sycode"> </p> The above code comes from Facebook, and I instantly felt so awesome! Ha ha. <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="HTML Learning Tutorial 7: The First HTML Template_html/css_WEB-ITnose" href="https://m.php.cn/faq/274682.html">HTML Learning Tutorial 7: The First HTML Template_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="HTML Learning Tutorial 7: The First HTML Template_html/css_WEB-ITnose" href="https://m.php.cn/faq/274684.html">HTML Learning Tutorial 7: The First HTML Template_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>