Logo
×

HTML Layouts

HTML Layouts

HTML templates provide a way for well-managed, well-structured responsive web pages to be organized. We could say that the HTML layout specifies how web pages can be set up. Web page architecture operates with the visual elements of an HTML document being structured.

Web page layout is the most important thing to bear in mind when designing a website so that with the great, look our website will look professional. We can also use the CSS and JAVASCRIPT based framework to build a responsive and interactive website design models.

HTML Layouts

Each website has a specific style to look at the contents in a particular way.

The following are various elements of HTML5 used to describe the different sections of the webpage.

  • <header>: It is used to define a document header or section header.
  • <nav>: It is used to define a navigation link container.
  • <section>: It is used to identify a document section.
  • <article>: It is used to define a self-contained, independent article.
  • <aside>: It is used to define content in addition to the content (like a sidebar).
  • <footer>: It is used to describe a footer or section of a text.
  • <details>: It is used to define additional data.
  • <summary>: It is used to define the heading for the < details > element.

Description of various Layout elements

HTML <header>

The < header > element is used to create a web page header section. The header contains the webpage introductory content, heading part, logo or icon, and information about authorship.

Example:

<!DOCTYPE html> 
<html> 
<head>             
<title>First Webpage</title> </head> 
<body> 
<header style="background-color: #303030; height: 80px;width: 100%">             
<h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to MyFirstWebpage</h1> 
</header> 
</body> 
</html>

Output:

HTML Layouts

HTML <nav>

< nav > is the container for the main navigation link block. It may contain links to the same page or to other pages.

Example:

<!DOCTYPE html>
<html>
<head>
  <style> li{  display: inline-block;   padding: 10px}  </style> 
</head> 
<body>  <nav style="background-color:#bcdeef;">  
<h1 style="text-align: center;">Navgation Links</h1>  <ul>  
<li><a href="#">link1</a></li>   
<li><a href="#">link2</a></li>  
<li><a href="#">link3</a></li>    
<li><a href="#">link4</a></li>                       
</ul>             
</nav> 
</body>
 </html>

Output:

HTML Layouts

HTML <section>

HTML < section > elements are a separate section of a web page that contains a related group of elements. It may include text, photos, tables, videos, etc.

Example:

<!DOCTYPE html>
<html> 
<head>             
<title>Page Section</title> 
</head> 
<body> 
<section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">             <h2>Introduction to HTML</h2> 
<p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser.</p>
</section>
</body>
</html>    

Output:

HTML Layouts

HTML <article>

The HTML tag is used to contain a self-contained article, such as a big story, a big article, etc.

Example:

<!DOCTYPE html> 
<html> 
<head>             
<title>Article Example</title>
</head> 
<body> <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">             <h2>History of Computer</h2>  
<p>Write your content here for the history of computer</p>
</article>
</body> 
</html>    

Output:

HTML Layouts

HTML <aside>

HTML < aside > Set aside content related to primary content. The content of the < aside > must be linked to the primary content. It can be used as a sidebar for the main content of the web page.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Aside Example</title> 
</head> 
<body> <aside style="background-color:#e6e6fa">             
<h2>Sidebar information</h2>            
<p>This contains information which will represent like a side bar for a webpage</p> 
</aside> 
</body> 
</html>    

Output:

HTML Layouts

The HTML < footer > element defines the footer for this document or web page. It mostly includes author information, copyright information, other links, etc.

Example:

<!DOCTYPE html> 
<html> 
<head>            
 <title>Footer Section</title>
 </head> 
<body> 
<footer style="background-color:#f0f8ff; width: 100%; text-align: left;">             
<h3>Footer Example</h3>            
 <p>© Copyright 2018-2020. </p> 
</footer> 
</body> 
</html>    

Output:

HTML Layouts

HTML <details>

The HTML < details > element is used to add extra details to the web page and can be used to hide or display the details as required.

Example:

<!DOCTYPE html> 
<html> 
<head>            
<title>Deatils element</title>
</head> 
<body> 
<details style="background-color: #f5deb3">            
<summary>This is visible section: click to show other details</summary>        
<p>This section only shows if user want to see it. </p> 
</details> 
</body>
</html>  

Output:

HTML Layouts

HTML <summary>

The HTML < summary > element is used with the < details > element on the web page. It is used as a summary of the content of the < details > element.

Example:

<!DOCTYPE html> 
<html> 
<head>       
<title>Summary Example</title> 
</head> 
<body> 
<details>  <summary>HTML is acronym for?</summary>            
<p style="color: blue; font-size: 20px;">Hypertext Markup Language</p> 
</details>
</body> 
</html>    

Output:

HTML Layouts

Related Topics

HTML5 Tags

HTML5 Tags A list of newly included tags is provided in HTML5. These HTML 5 tags (elements) provide a better structure for the document. This list shows description of all HTML...

3 minutes read.

How to insert spaces/tabs in text using HTML/CSS

What is HTML? HTML or HyperText Markup Language is used to design web pages. It was released in 1993. The file extension name for HTML file is “.html”. An HTML file...

4 minutes read.

HTML Form Input Types

HTML Form Input Types An important element of the HTML form is < input type= "> in HTML. The type attribute of the input element can be of different types, which...

8 minutes read.

HTML &lt;blink> Tag

In HTML, the blink tag is used to create the text which flashes. The blink tag is an inline element in HTML. It is observed that the blink tag used...

2 minutes read.

HTML Youtube

<object> element: It embed the object within the HTML documents and embed plug-ins such as Java applets, PDF readers, Flash Players etc in web pages. Example: <object width="100" height="100" data="bookmark.swf"></object> <embed> element: It defines an embedded...

1 minute read.

HTML <strike> tag

The HTML <strike> tag is used to specifies strikethrough text. The tag is deprecated now and <del> tag is used in HTML files instead of it. All the global and...

2 minutes read.

HTML <script> Tag

For embedding a client -side script, we use script tag in html tag. This <script> tag can be used for containing scripting statements. It can also point another external script file...

2 minutes read.

Html &lt;Col> Tag

You can write the col tag inside the table tag after the thead, tbody, foot, and tr tags. You can also apply it after the caption tag (in which the...

4 minutes read.

HTML Code Tag

The code tag in HTML is a phrase tag used to insert a piece of computer programming code. In HTML there is a separate tag named as <code> tag. Sometimes,...

3 minutes read.

HTML Attributes

HTML Attributes provide the additional information about HTML elements. Attributes are always specified in the start tag. Attributes usually comes in pairs. lang Attribute This attribute helps in declaring the language...

2 minutes read.

HTML Text Format

Introduction HTML may format text in two different ways. The HTML tags define a text property to make it appear one way or another. A text element may also be formatted...

7 minutes read.

HTML Reset Button

The HTML reset button is used to reset all values in the form. It clears all input fields. Reset is the value of the type attribute of the button element. The...

6 minutes read.

HTML City tag

HTML <City> tag HTML < cite > tag specifies a citation, a reference or title to a creative work, quoted content, books, websites, a research paper, a blog post, a painting,...

3 minutes read.

HTML Layouts

HTML Layouts HTML templates provide a way for well-managed, well-structured responsive web pages to be organized. We could say that the HTML layout specifies how web pages can be set up....

4 minutes read.

HTML <select> tag

This tag helps in making the drop-down list on the web page. This is highly used in HTML forms for taking the input from user. You can use the id attribute...

3 minutes read.

HTML Basic Tags

Heading Tags: This tag represents the document header. It is said to be a good practice if every document starts with Heading. Heading tags ranges from H1 to H6 i.e....

3 minutes read.

HTML Data Tag

HTML Data Tag: The HTML < data > tag is used to transmit its content to a machine-readable version. The data are presented in a particular format. It is useful...

3 minutes read.

How to change text color in HTML

Changing the text colour of a web page is essential because it enhances readability. There are several ways to change the colour of the text in HTML, which are as follows: Text...

7 minutes read.

HTML <address> Tag

Hyper Text Markup Language, HTML is the best markup language for creating Web pages. HTML consists of a wide variety of elements. In all of these elements, one element is...

4 minutes read.

Caption Tag in HTML

Caption Tag in HTML: The < caption > tag in HTML describes the heading of a table in the HTML text. Browsers typically make the text found above the table...

4 minutes read.