Heading tags should reflect the semantic structure of the web page.

Heading tags (< h1 >, < h2 >, < h3 >, etc.) are HTML elements created with the purpose of communicating a hierarchy of headline importance. Communicating this hierarchy of page text and topics is critical for human readers, assistive devices and search engine crawlers alike, giving both the ability to identify the information structure of a page.

While heading tags do generally correspond with design styles, this is only a far secondary – and purely aesthetic – purpose. Do not decide which heading tag to use based on how it looks on the front-end of the page, as this is not the functionality that you will truly be creating by using the tags.

Also related are HTML elements that have semantic meaning, such as the elements used to present text in italics and bold. Use < em > (italics) and < strong > (bold) to provide semantic strength to the text within the HTML elements.

Additional Perspectives on Heading Structure

http://webaim.org/techniques/semanticstructure/
http://blog.woorank.com/2013/04/how-to-use-heading-tags-for-seo/