如果您不遵守 order 或者多于1 h1 标签，但它肯定会看起来很丑。

遵循的第1点和第2点不是强制性的，但主要针对搜索引擎优化（seo） 。这是白帽SEO技术之一，这将有助于您的网页排名搜索引擎爬行。其次，你的网页应该更多语义正确和更好看的大纲。

I'm having trouble understanding the proper usage of HTML headings. I'm using books and online resources to self-learn but there are slight discrepancies on how to use them.

[1] "Note that the h1 tag is only used once, as the main heading of the page. h2 to h6, however, can be used as often as desired, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2."

OR

[2] "the logical heading level reflects its importance in relation to the main content."

So the question is: do I use them in order where h4 must be a sub-heading of h3 which should be a sub-heading of h2 and so on or use the heading levels according to its importance in relation to the main content?

Although, I have seen both methods being used. However, the second method kind of messes with the document outline. Just want to get some other opinions on this.

Your webpage is not going to break if you don't follow the order or have more than 1 h1 tags but it will definitely look ugly.

Following point 1 and point 2 that you mentioned is not mandatory but advisable mainly for search engine optimization(seo). It's one of the white hat seo techniques which will somewhat help in your web page ranking by a search engine crawler. Secondly, your webpage would be more semantically correct and with a better looking outline.