DEV Community

Ty
Ty

Posted on

HTML Basics

While doing module 2 for my bootcamp at Flatiron school. We have completed many labs where html was needed. HTML may seem like munbo gumbo but it is really straight forward. Here are a few html basics that has helped me through my labs.

Need to know lists? There are two easy lists you could do which are unordered and ordered lists.

<ul>
<li>Corgi</li>
<li>Husky</li>
</ul> 
Enter fullscreen mode Exit fullscreen mode

This is an unorder list. You can tell with "ul instead of "ol" which are just sorten for what they mean. "li" basically means list and that you are adding it to the unorder or ordered list. Remember to close your lists with "/ul" or "/ol" and make sure they match what you had started with!

<ol>
<li>Corgi</li>
<li>Husky</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Want to add clickable links? Well thats really simple as well you would use the tag "href" here is an example!

<a href="Link">Name of the link</a>
Enter fullscreen mode Exit fullscreen mode

Here it is in production!

Click here to redirect to google!

a means anchor, and you are referencing the link with href. Afterward, you would have the name or text or the link that users are able to click on!

There are many other basic tags to add words to your website as well.

<h1></h1> - Which is your header 
<p></p> - Which is your paragraph
<br> - to make a new line
Enter fullscreen mode Exit fullscreen mode

These are to help you create basic descriptions, title headers, or just having a new line.

An advanced tag would be making a form! Here is an example

<form>
  <label for="dog_name">Dog name:</label><br>
  <input type="text" id="dog_name" name="dog_name"><br>
  <label for="breed">breed:</label><br>
  <input type="text" id="breed" name="breed"><br>
  <input type="submit" name="submit">
</form>
Enter fullscreen mode Exit fullscreen mode

Which looks like this in production!

These have been the most used html code so far during my labs. It is very helpful to learn the basics to help you get prepared for the more advanced html codes!

Top comments (0)