Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...

Question

Question

Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...

Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief description of absolute and relative positioning with CSS.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Section, Article, and Aside elements in HTML5:-

Section:-

The <section> element defines a section in a document.

A section is a thematic grouping of content, typically with a heading."

A home page could normally be split into sections for introduction, content, and contact information.

The <section> element is a structural HTML element used to group together related elements. Each <section> typically includes one or more heading elements and additional elements presenting related content.

Syntax:

<body>
<section>
  <p>Text that appears under section</p>
</section>
</body>

Article:-

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used:

Forum post
Blog post
Newspaper article

The<article> element specifies independent, self-contained content.

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, on the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

Example for a newspaper: The sport <article> in the sport section, may have a technical section in each <article>.

Syntax:-

<body>
<article>
  <p>Text that appears under article</p>
</article>
</body>

Aside:-

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be related to the surrounding content.

The HTML <aside> element is an HTML5 element that is found within the <body> tag.

The <aside> tag can be used for any of the following: advertisement, glossary definition, biography of the author, profile information, or related links.

Syntax:

<body>
<aside>
  <p>Text that appears under aside</p>
</aside>
</body>

Absolute and Relative positioning with CSS :-

The CSS position property defines, as the name says, how the element is positioned on the web page.

So, there are several types of positioning: static, relative, absolute, fixed, sticky, initial, and inherit. First of all, let's explain what all of these types mean.

Static - this is the default value, all elements are in order as they appear in the document.
Relative - the element is positioned relative to its normal position.
Absolute - the element is positioned absolutely to its first positioned parent.
Fixed - the element is positioned related to the browser window.
Sticky - the element is positioned based on the user's scroll position.

Relative Positioning:-

When you set the position relative to an element, without adding any other positioning attributes (top, bottom, right, left) nothing will happen. When you add an additional position, such as left: 20px the element will move 20px to the right from its normal position. Here, you can see that this element is relative to itself. When the element moves, no other element on the layout will be affected.

There is a thing you should keep in mind while setting position - relative to an element limits the scope of absolutely positioned child elements. This means that any element that is the child of this element can be absolutely positioned within this block.

Try this program to get more clarify about relative positioning

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

Absolute Positioning:-

This type of positioning allows you to place your element precisely where you want it.

The positioning is done relative to the first relatively (or absolutely) positioned parent element. In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself).

An important thing to keep in mind while using absolute positioning is to make sure it is not overused, otherwise, it can lead to a maintenance nightmare.

Run the following programs to get more clearity about absolute and relative positioning:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

Add a comment

Answer 2

Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...

Homework Answers

Add Answer to:
Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...

Post as a guest

Earn Coins

Regarding HTML and CSS answer the following... 1: Describe the different types of positioning used in...

post a brief description of the article you selected. Include a PDF of the article as...

Provide a brief description of your task and the information/output of your task and the importance...

Provide a brief description of the schematics What do they represent and how can you relate...

Provide a brief description of what the community resource does.

Provide a brief description of different types of histone modification. Part A Sort the enzymes and...

In 3 sentences, provide a brief description of the Pearson r statistic.

5. List four types of chemical reactions and provide a brief description of them. 6. What...

Provide a brief description of how frequencies and amplitudes are adjusted in these two circuits?...

Provide a brief description of your nonprofit and the state that it will be established in....

Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...

Homework Answers

Add Answer to: Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...

Post as a guest

Earn Coins

Add Answer to:
Provide a brief description of section, article, and aside elements in HTML5. Also, provide a brief...