HTML

HTML Tags

HTML consists of a ton of different tags. Each tag has a different functionality. We'll go over divs, h1s, p, spans, and more. Before you learn anything else, you should know that every HTML site needs to start with two things. You need an html tag and a body tag. Each tag needs to open and close.The open shows where the tag starts, and the closing tag tells where the tag ends. <html> is a starting tag, and </html> is a closing tag for HTML. Easy, right? 

   <html>
     <body>
       <div> Hello, World! </div>
     </body>
   </html>

Divs

Container elements. Create break lines between different elements. Also, you show text inside a div by putting your display text in between your starting and ending tags, like shown below. We showed one example above. Let's show another!

  <html>
    <body>
      <div>
        <div>
          Div within a div!
        </div>
      </div>
    </body>
  </html>

div elements help us structure our pages better. But be sure not to overdo it!

Header Tags

Header tags go from h1 to h6. h1 is the largest and h6 is the smallest. Header tags are basically headings. What do they look like? Look at the heading "Header tags". Exactly like that.

  <html>
    <body>
      <div>
        <h1>Hello World in large font!</h1>
      </div>
    </body>
  </html>

Paragraph Tags

<p> tags are for whenever you want large blocks of text. 

  <html>
    <body>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </body>
  </html>

Bold and Italic Tags

Both <strong> and <b> tags embolden the text within them. Both tags accomplish the same goal from a visual standpoint, but serve different purposes for text-to-speech programs. For now, use either one of them.

On a similar note, both <em> and <i> tags italicize the text within them. For now, use either one of them.

  <html>
    <body>
      <div>
        <p><strong>Bold text!</strong></p>
        <p><em>Italicized text!</em></p>
      </div>
    </body>
  </html>

Anchor Tags

<a> is the Anchor tag. Elements that can link to other pages! Here's another example. Again, the link text is in between the beginning tag and ending tag. The href attribute tells the browser where to link to. Also, href is an attribute that only works with anchor tags.

  <html>
    <body>
      <div>
        <a href="https://google.com">Here's a link to google!</a>
      </div>
    </body>
  </html>

Attributes

See the href in the anchor tag in the previous example? Those are called attributes and those are used on HTML tags to give those HTML tags special features. Some features are specific to what tag you use, such as the href attribute tag and the anchor tag. Other attributes are class, style, type and more.

Some of these attributes will be discussed soon.

Tabbing/Spacing

If you look at the previous code examples, you'll notice that each "layer" of tags have two spaces in front of them, corresponding to which layer they're in. While it doesn't affect the outcome of website from a visual standpoint, it's generally good practice to insert a tab (with the tab key) or two spaces for each layer of nested tags.

results matching ""

    No results matching ""