🎨 Part 1: Basic HTML tags

By /

As you already know, there are tons of HTML tags you can use to build your websites with.
Since HTML is a structured language, most of the tags that act as containers, need to start and end somewhere.
HTML tag starts with “<tagname>” and ends with “</tagname>”. Additional HTML code can be written between those two tags.

HTML tags can have different attributes, like class, id, href, which we will check later.

1# Text tags

Heading tags

<h1>This is a heading<h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraph tag

<p>This is a paragraph tag, used for normal text</p>
Link tag (anchor tag)

<a href="https://url.com" target="_blank">This is a link to some website</a>

Anchor tag starts with "<a ".
Href is an attribute for the URL it should take to.
Target="_blank" means that the link will be opened in a new tab
Linebreak tag
These tags have no end-tags, because these are not containers, rather, single line codes.

<br>

<p>This is the first line<br>And this is the second line of text</p>

Separator tag

<hr>

This will create a horizontal line
Text formatting tags

<i>This line is written in italic</i>
<b>This line is written in bold</b>
<s>This line is striked through</s>
Listing, creates bullet-points (<ul>) or numbered points (<ol>)

<ul>
  <li>Option 1</li>
  <li>Option 2</li>
</ul>


<ol>
  <li>Option 1</li>
  <li>Option 2</li>
</ol>

2# Media tags

Image tag is one of the tags which has no ending tag, because it’s not a separate container. It’s one line of code for image.

Image tag

<img src="https://app.patchstack.com/icons/logo-new.svg">

<img> tag has optional attributes "height" and "width", which define the pixels.
It also has "alt" and "title" attributes. 
Alt attribute is shown on a page, when the image fails to load.
Title attribute is shown when you hover on an image.

<img src="https://app.patchstack.com/icons/logo-new.svg" height="200" width="300" alt="Patchstack logo" title="Logo of Patchstack">
Video tag

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

3# Form tag

Form tag is used to create any type of forms with different types of input fields on a website

Form tag
Form tag needs different attributes to define how the form works.

<form action="someurl.php" method="POST" enctype="multipart/form-data">
   <input type="text" name="address" placeholder="Enter your address">
   <button type="submit">Send your address</button>
</form>

"Action" attribute shows, to which file the data is posted to. This has to be a PHP file, which can then be programmed to handle the data.
"Method" attribute defines, whether it's a POST or GET request.
"Enctype" attribute is needed, when the form should handle file uploads too.

Forms include input fields, which must be written between the <form> </form> tags.

4# Input fields

These fields are used inside the <form> tags to create forms.

Input field attributes

  • “name” – Input fields must always have a “name” attribute, so these can be used in forms when data needs to be submitted to server. Names are used to identify which fields value we want to receive.
  • “placeholder” – can be used to display placeholder data, when the field is empty
  • “value” – Default value can be added to the field

Text, email, number, date, submit fields

These input fields don’t have an ending tag. These fields can only contain one line of text.

<input type="text" name="address"> - Allows to enter all sorts of characters

<input type="email" name="email_address"> - Allows to enter all sorts of characters, but validates the field, when form is posted

<input type="number" name="age"> - Allows to only enter a numeric value

<input type="date" name="start_date"> - Allows to only pick a date

<input type="submit" name="publish"> - Creates a submit button for the form

Textarea

Textarea is used for typing longer texts, or texts that need to be written on multiple lines

<textarea name="email_message" width="200" height="400"></textarea>

Select field

Field to display a list of options user can choose from. Select field has an ending tag, because it contains of different options.

<select name="animals">
    <option value="cat">A cool cat</option>
    <option value="small_giraffe">A giraffe with a short neck</option>
    <option value="long_giraffe">A giraffe with a long neck</option>
</select>

If we would post this field, and ask PHP to get the value of "animals" field, it would return, what we defined in the "value" attribute, while the browser will show the content that is between <option></option> tag.

Checkbox field

<input type="checkbox" value="yes" name="privacy_policy">

Radio field

Radio field is the field group where you can only choose one option. Radio field group inputs must all have the same name attribute.

<input type="radio" name="animal" value="horse">
<input type="radio" name="animal" value="cat">
<input type="radio" name="animal" value="dog">

Submit field

Submit field is used to trigger form submission when it’s clicked.

<input type="submit" name="send" value="Send the form!">

Button tag

Button tag is similar to the previous submit-field, but this tag has ending. So you can insert any kind of HTML inside the button tag to make your submit button to look however you like.

<button type="submit">Send the form!</button>

Iframe tag

iFrames are used to embed other websites on your site. Iframe is like a window inside your website. You can embed for example youtube videos, or Google Maps frame on your site.

<iframe src="https://www.somewebsiteurl.com" width="640" height="480">

Example of YouTube video iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/LL3Yy15rJ3g?si=GA-QDJAlFgy39pPi" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Independent exercise

Create an html contact page, which contains:

  • Image of yourself or your Patchstack avatar
  • One title of your name under it
  • Link to your LinkedIn profile or somewhere else
  • Some description text
  • Has a form input fields for
    • your name,
    • your email,
    • give a rating from one to five to my website (radio fields),
    • select field with options about where you found my website,
    • button for form submit
    • add some cool retro GIF image to your website, find a picture here: https://gifcities.org/
Scroll to Top