HTMLdevslopes/HTMLdivandspan at main · OldsoulPhil/HTMLdevslopes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Divs and Spans</title>
</head>

<body>
<!-- div tags are known to be building blocks (block element) which are stackable -->
<!-- can be used as a container or a wrapper for other elements -->
  <div>Sample Text</div>
  <div>Sample Text</div>
  <div>Sample Text</div>

<!-- the div will group other div's and elements together -->
<!-- the first div acts as the container -->
  <div>
    <button>Click me</button>
    <div>More Text</div>
    <div>More Text</div>
    <div>More Text</div>
  </div>

<!-- we will put an input element inside of a div acting as a container -->
<!-- an input element is a box that you can add text or numbers to -->

<!-- class attribute is used to point to a class name in a style sheet. Help manipulate other elements with class name. -->

<!-- you can also include id, title, along with the class type -->
<!-- title attribute will allow you to hover over an input and see what it is called -->

  <div id="inputId" title="some cool inputs" class="input-wrapper">

  <!-- the type for these will make that input the type the input is asking for -->

    <input type="text">
    <input type="number">
  </div>

<!-- span tag is an inline container element -->
<!-- mainly used to mark up a document. -->
<!-- keeps elements inline with other elements -->
  <span>
    Hello there!
  </span>


</body>
</html>