QUIZGUM

Coding Class

Quizgum : div tag

div

This time, let's learn about the div tag.
The div tag is often used when creating layers. I use it when I write html code and I have the effect with CSS.
It is also used for layout. Header, container, content, footer and so on.
I know it is hard to know by now, but just remember those things, and figure out together later on. Let's take a look at the layout.

I am header

I am content1

I am content2

I am content3

right

I am footer



Create the above layout using the div tag.

However, the above layout is not created with the div tag alone. You should use something called a stylesheet.

The source of the low-level layout is shown below.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>div</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <div>
  10.         <p>I am header</p>
  11.     </div><!-- header -->
  12.     <div>
  13.         <div>
  14.             <div>
  15.                 <p>I am content1</p>
  16.             </div><!-- content1 -->
  17.             <div>
  18.                 <p>I am content2</p>
  19.             </div><!-- content2 -->
  20.             <div>
  21.                 <p>I am content3</p>
  22.             </div><!-- content3 -->
  23.         </div>
  24.         <div>
  25.             <p>right</p>
  26.         </div>
  27.     </div><!-- container -->
  28.     <div>
  29.         <p >I am footer</p>
  30.     </div><!-- footer -->
  31. </div>
  32. </body>
  33. </html>

result

download

There is only a div tag and a p tag. If you apply a style sheet there, you can do it like that.
I forgot to explain the p tag. ^^
You could think of the p tag as a text-writing tag. As I know, the word p is a abbreviation of paragraph.
If you have text that you'd like to bundle into one, <p> Hello </p>
So let's finish the html course and learn the style sheet.

Thanks for leaning HTML with me !