semantic-practice/index.html at main · deeyaapatell/semantic-practice · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>More Semantic HTML Practice</title>
    <meta
      name="description"
      content="Additional practice with the HTML5 format and semantic HTML text elements, in addition to lists and entity tags."
    >
    <meta name="author" content="Deeya Patel">
  </head>

  <body>
    <header>
      <h1>More&nbsp;Semantic HTML&nbsp;Practice</h1>
    </header>

    <main>
      <section>
        <h2>Today's In-Class Activity</h2>
        <p>
          Today we'll practice more with semantic HTML for marking up text, as
          well as grouping content by topic and using headings to help the user
          know what the topics on your page are. Remember, the HTML you add to
          your pages tells the user (and search engines) the kind of content
          they're going to find.
        </p>

        <p>Follow the steps below to complete this activity:</p>

        <ol>
          <li>Add your name to the meta author tag above.</li>
          <li>
            Open this file in your browser so you can view and test it while we
            code.
          </li>
          <li>
            Review this file and its content to get a better idea of what will
            be on the final page.
          </li>
          <li>
            Some of the tags have been added for you to help you see how this
            content could be marked up semantically. Follow along in class as we
            add the rest of the tags to the page.
          </li>
          <li>
            While we work, save your file and refresh it in the browser often to
            ensure that it is loading as expected.
          </li>
        </ol>
      </section>

      <section>
        <h2>Basic Text Tags</h2>
        <ul>
          <li><code>p</code> - for paragraph text, usually multiple lines</li>
          <li>
            <code>em</code> - for text that needs to be emphasized in some way
            (this adds meaning)
          </li>
          <li>
            <code>strong</code> - for important text (this adds meaning)
          </li>
          <li><code>cite</code> - for the title of a work</li>
          <li>
            <code>mark</code> - marked or highlighted text (this adds meaning)
          </li>
          <li>
            <code>b</code> - text that needs attention, but isn't important or a
            heading
          </li>
          <li><code>i</code> - text in an alternative voice</li>
          <li>
            <code>u</code> - text that should appear differently than normal
            text, underlined by default
          </li>
          <li><code>kbd</code> - for keyboard input</li>
          <li><code>samp</code> - for sample output from a computer</li>
          <li><code>var</code> - for variables in a computer program</li>
        </ul>

        <p>
          When choosing a tag pair to wrap your content in, be sure to think
          about what that your text actually is. Is it just a paragraph? Then
          paragraph tags are fine. Is there a more specific way to describe that
          content? Maybe it's an address or a code sample. There are a lot of
          semantic HTML tags for text to help you define your content in the
          best and most specific way possible.
        </p>

        <p>
          <strong>Remember:</strong> HTML tags aren't used to style the text a
          certain way. If you want bold text but that text isn't actually
          important to the user or meaning of your text, don't use
          <code>&lt;strong&gt;</code> or <code>&lt;b&gt;</code> tags or wrap it
          in a heading tag pair.
        </p>
      </section>

      <section>
        <h2>Tags for Grouping and Describing Content</h2>
        <ul>
          <li>
            <code>h1</code> - the most important heading, only use one per page,
            and it has to be first. Should be the page main topic or company
            name
          </li>
          <li>
            <code>h2</code> - the second level of heading. Anything located in
            the document as a sub-topic of the h1 will be labeled in an h2
          </li>
          <li>
            <code>h3</code> - third level of heading for sub-topics of level 2
            headings
          </li>
          <li>
            <code>h4</code> - fourth level of heading for sub-topics of level 3
            headings
          </li>
          <li>
            <code>h5</code> - fifth level of heading for sub-topics of level 4
            headings
          </li>
          <li>
            <code>h6</code> - sixth level of heading for sub-topics of level 5
            headings
          </li>
          <li><code>section</code> - container for grouping related content</li>
        </ul>

        <p>
          Headings have specific uses, and they don't have anything to do with
          the way they look. We use headings the way you would use an outline to
          map out topics for a paper. Think in terms of the main topic,
          sub-topics of that, and even sub-topics for more levels after that, up
          to six levels. A container will never have or need more than one
          heading inside of it.
        </p>

        <p>
          The section is a more flexible semantic container than those we'll
          learn about in the next module. All sections require headings, so be
          sure that you understand which level is appropriate for your heading
          inside of any sections. You can also have a section with its own
          heading nested inside of another section with a heading (if the
          section nested inside is a sub-topic of the outer section).
        </p>
      </section>

      <section>
        <h2>Special Characters</h2>
        <ul>
          <li><code>&amp;copy;</code> - the copyright symbol</li>
          <li>
            <code>"&amp;nbsp;"</code> - the non-breaking space symbol (used to
            ensure that two words are always displayed next to each other on the
            same line, this doesn't include or need the quotes, that's just so
            you can see it)
          </li>
          <li>
            <code>&amp;amp;</code> - the ampersand (not using the entity
            character can cause issues on your page)
          </li>
          <li>
            <code>&amp;lt;</code> and <code>&amp;gt;</code> - the less than and
            greater than characters will allow you to type these on your page
            and in code samples without them breaking your HTML (which uses
            those characters a lot!)
          </li>
        </ul>

        <p>
          These special characters come in handy on the web. Some characters are
          things that you can't just type out on your computer, while others
          replace characters that could break your code. They can add formatting
          (like in the case of a non-breaking space), but they should not be
          used to replace CSS. There are a lot of these characters available, be
          sure to check them out. Your zyBook includes a link to a table of
          entity characters that is a good thing to bookmark.
        </p>
      </section>

      <section>
        <h2>Lists</h2>
        <ul>
          <li>
            <code>ol</code> - for ordered lists, or a list of steps that need to
            be completed in an order or items that will be counted
          </li>
          <li>
            <code>ul</code> - unordered (bulleted) lists, those that don't have
            to be completed in a certain order
          </li>
          <li>
            <code>li</code> - an individual list item inside of a list, this tag
            will work whether the list is ordered or unordered
          </li>
        </ul>

        <p>
          Throughout this page, we use lists to give a list of the tags related
          to the topic given by the heading in each section. Lists can be very
          useful, as there is plenty of content that is displayed in a list
          format, but they also help accessibility. Lists will tell screen
          reader users how many elements there are in that list (they can use
          the list items to do that), which means that a user knows how many
          items are in the group that they'll have to listen to. We'll use these
          a lot in our pages, especially when adding navigation.
        </p>

        <p>
          You can also nest lists inside of each other, as you saw in the
          headings and grouping content section above. Making your content
          easier to scan and understand improves the user experience, and lists
          can be a big part of that.
        </p>
      </section>
    </main>

    <footer>
      <p>Copyright &copy; 2023 - GIT215 - Prof. Barnett</p>
    </footer>
  </body>
</html>