# Layouts Learn best practices for creating responsive layouts using semantic HTML and Tailwind. ## Real World Example See our real world three column example, which implements many of the concepts introduced below. ## Semantic Markup When creating custom layouts, it's recommended to use semantic HTML to denote each region of the page. \| Element | Description | Source | \| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | \| `

` | Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) | \| `

` | Represents the dominant content within the document ``. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. | [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) | \| `