Scribd
Upload
19 views

HTML 3

The document discusses several HTML elements used to provide structure to web pages, including <body>, <main>, <article> and <section> which divide content into thematic sections, <aside> for supplemental information, <nav> for navigation links, and <header> and <footer> for introductory and closing content.

Uploaded by

Mr. Vinoth Kumar L Asst.Professor
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

HTML 3

The document discusses several HTML elements used to provide structure to web pages, including <body>, <main>, <article> and <section> which divide content into thematic sections, <aside> for supplemental information, <nav> for navigation links, and <header> and <footer> for introductory and closing content.

Uploaded by

Mr. Vinoth Kumar L Asst.Professor
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML – Page Structure

Elements
Page Structure Elements
There are a group of elements used in HTML that gives our document more better structure. They are.

1. Body
2. Main
3. Article & Section
4. Aside
5. Navigation
6. Header & Footer
Body
The body element contains all the content of the body

This typically encompasses everything except the meta elements and its sub elements
Main
The main element is used to designate the unique content of each page
Example - Main

!DOCTYPE html> <main>


<html lang="en"> <h2>Recipe for Chili</h2>
<head> <p>Instructions...</p>
<meta charset="UTF-8"> </main>
<title>Chili Recipe</title>
</head> <footer>Copyright, me</footer>
<body>
<h1>Recipe Book</h1> </body>
<nav> </html>
<ul>
<li><a
href="recipes.html">Recipes</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
Article & Section
It is used to represent thematic parts of a document.
Example
<section>
!DOCTYPE html> <h2>Ingredients</h2>
<html lang="en"> <ul>
<head> <li>Peanut Butter</li>
<meta charset="UTF-8"> <li>Jelly</li>

<title>Chili Recipe</title> <li>Bread</li>

</head> </ul>
</section>
<body>
<article>
<section>
<h1>PB&J Sandwiches</h1>
<h2>Instructions</h2>
<p>Here's how to make this snack staple.</p>
<ol>
<li>Get two slices of bread.</li>
<li>Spread peanut butter on one side of both slices.</li>
<li>Spread jelly over the peanut button on one slice of
bread.</li>
<li>Press bread slices together.</li>
</ol>
</section>
Example
Aside Tag
The Aside tag gives information about the main content

Example:

<p>I don't want to live in Ghaziabad, I wish; I could buy a flat in New Delhi.</p>
<aside>
<h3>New Delhi</h3>
<p>New Delhi is the capital of India.</p>
</aside>
rs">Mac</a></li> <li><a href="ipad.html" title="Learn about iPads">iPad</a></li> <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li> <li><a href="support.htm

Nav Tag
The nav tag is used to indicate areas of the page used for primary navigation

Example:
<html>
<head>
<title>The Navigation tag</title>
<body>
<h1>The navigation tag </h1>
<nav>
<ul>
<li><a href="mac.html" title="Mac computers">Mac</a></li>
<li><a href="ipad.html" title="Learn about iPads">iPad</a></li>
<li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li>
<li><a href="support.html" title="Get support">Support</a></li>
</ul>
</nav>
</body>
</html>
rs">Mac</a></li> <li><a href="ipad.html" title="Learn about iPads">iPad</a></li> <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li> <li><a href="support.htm

Header & Footer


The header is used to indicate the website branding and main navigation elements

The Footer would be used to mark up content at the end of the page

Example:
rs">Mac</a></li> <li><a href="ipad.html" title="Learn about iPads">iPad</a></li> <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li> <li><a href="support.htm

<html>
<head>
<title>The Navigation tag</title>
<body>
<header>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAB+CAMAAAAKn+3gAAAAYFBMVEX///8AAAD39/
fh4eHr6+vDw8Px8fHJyclOTk7l5eXu7u55eXlCQkL7+/
vS0tKjo6OUlJS9vb2ysrI7OzvZ2dlycnKGhoYTExNiYmJcXFwtLS0dHR01NTUnJyednZ1oaGiyEGVGAAAD50lEQVR4nO2c25aiMBBFCchVBBFE
aQX+/
y8HurWFBNp2OEyODPuRxUOdldQtKTCMlZWVlZWVFY1YcV0cdBsxF2aUi5a9bkNmIjkKsWCBlne66ROVbltmIMjFgwX6YOR19IlEtzlw3I+uv
pOr2x40B9HD83UbBMbt6xNH3QaBya6SwFi3RVgCT9J3MnWbhCWX9ImtbouwWLI+Yek2CYu8QZdWpyUnSV+4rBxhHuUFXFiZFi08wight
NjptgjMsh3QMDZ9felGt0Fo+lW2l+m2B07PBRe3PxvOD3mnpfUQnzwEesvr4lu+BcaBblPmoWi0fYSFrdsOAI4V2XYkh5Ekjg9RJzcEUfOkeXZ
w3yvgJNvCSz8ul2ax6oMz9la2P3v3w6fmze2beOXGlhuiMs6Unt2JlL63jTw2feb3q3DAcHE89HK6WxVDb7W5seLeq3E6Yri41ve+aLMvyrG3
GlLi/ikalXfbgVUU5Zef3xHEFdzhqem/pOQMN3uUPkHZ5jvn52a/
AN1ZsLmF6uO7cELuz08ukW5JPWK0viZ1jlZAGlDOyqazZ6ppdspp9WS4XHCorJxEwbR8hmH9VHn9DWeybhidIcjWzwjA+jym8NmCXkC2Uj
t40kK8Cl2RBs7xR7YLe3ARyjcTZMkzIdMIdetRkId6JsJVYrdg24iS7z4UW4bmuuWoQPUJuhBjmFB9JZ8LYjtBtiq0IYEKrNmyvGFUUIGEQzPYLE
EYRLHN/Crw37MKfAm6XgkdZNhOmwy0wJBvuhncz/PVojZWIN+9oDpDP4mzbj0qWIGCL8qABfJ9Y4A9cxJXukyIvlmiW0LY7MiNK1sqhF/
u1roVSfiDs2lTILucgM+P0JUz8AESceFyQxd9gS3Irgh3cCdsoBrqVj6YA3Bi+vnDDFNAgqs1nEWgKPc0w83wOaAb6Z6kMM1mEkhzBuXUMw
mk6e+xFxTf8Hw+GYCbwhtEVzH4erSFJoo2XjiHPqqJkjkyBdV1dvb8e5ZXqbmGDvFeSJMjvoBP/
Ra6FcmgvZDKA1uwAzN0R08GeCqvJGqW7qh/ipkA2cnaFz4uVVz5hg5bcJuUpsqWQEVSyg3aovwS7u+oOTdoCyTdhyR9/
CCI4UOyk3uJ6Qf5tA74xW5qoKG7AJVxxn7i8DuOvAHmjj/lWyaPb8pCJRg9Rbykoed54VX+veFj/
bia3DGCwe43zWM78x3T8bMk3g7mk5w5QXQx1Vh6jDZd7zJ95a8zTfzk979vsm6ouRaDod/Jvc46lvU7uN+DXXL7r0q6rUabc9Ottp/
Xp6d6/CVadn7m2pHl/7zvzI2VZZn1HsFlZWVl5b/jDxBhNN+0Asc3AAAAAElFTkSuQmCC" alt="Apple Inc." width="50" height="50"</p>
rs">Mac</a></li> <li><a href="ipad.html" title="Learn about iPads">iPad</a></li> <li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li> <li><a href="support.htm

<nav>
<ul>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h1>Chili Recipe</h1>
<p>Chili....</p>
</article>
</main>

<footer>
<small>All recipes © me</small>
<br>
<a href="sitemap.html">Sitemap</a>
<a href="legal.html">Legal</a>
</footer>

</body>
</html>

You might also like