[HTML/CSS] Explanation of frequently used tags and properties for beginners?

1.7K

When coding in HTML and CSS, you have to understand various tags and properties.

However, there are so many HTML tags and CSS properties that it can be difficult to remember. First, you need to understand the frequently used tags and properties.

Therefore, in this article, we will introduce tags and properties that frequently appear when coding HTML and CSS.

If you remember frequently used tags and properties, you will definitely be able to speed up your coding and study HTML and CSS .

Learn frequently used HTML tags and CSS properties for efficient learning.

Explanation of HTML tags and CSS properties

First, let’s talk about HTML tags and CSS properties.

Knowing the basic meaning of tags and properties will help you understand the many tags and properties.

HTML tags make sense

HTML tags such as div tag, h tag, and p tag each have a role. Do not assign tags appropriately.

The h tag serves as a heading, and the p tag serves as a paragraph.

When creating a website, you must understand the roles and meanings of HTML tags and code them correctly.

The HTML tag is described as follows.

HTML
<div>ブロックを作ります</div>
<p>段落を作ります</p>
<img src="computer.jpg" alt="">

Some HTML tags require a closing tag while others do not. In the above code the img tag doesn’t need a closing tag.

CSS properties are decorated names

Understanding CSS properties is important, not just HTML tags.

A property in CSS means a type of decoration.

Specify HTML tags with selectors and describe what decorations are implemented with CSS properties .

CSS is described as follows.

CSS
セレクタ{
  プロパティ:値;
}

Write a colon after the property and write the value.

Don’t forget to close it with a semicolon.

Because you won’t be able to express decorations like you thought you’d forget the semicolon.

Introduces frequently used HTML tags and CSS properties

Now that you understand how to write HTML tags and CSS properties, let’s introduce tags and properties that are frequently used when creating websites.

The tags and properties listed below will appear almost without fail on most sites, so make sure you understand them and are able to use them.

In addition to explanations, we will also introduce how to use them and how to describe them, so please read to the end.

Explanation of frequently occurring HTML tags

Let’s start with HTML tags.

I narrowed down to 16 HTML tags from many.

I will also explain the role and description method of each.

div tag

The div tag is one of the most common HTML tags.

A website is created by making each block and combining them.

A div tag is an HTML tag that creates that block .

The div tag itself doesn’t mean much. However, they are useful HTML tags for creating and decorating blocks.

Here is a simple usage example.

HTML
<div>
    <h2>divタグとは？</h2>
    <p>divタグは、単体では意味はありませんが、ブロックを作る上でよく使われるタグです。</p>
</div>

CSS
div{
  width: 200px;
  background-color: skyblue;
}

As shown in the code above, various elements can be grouped within a block by describing them within a div tag.

h-tag

The h tag is an acronym for “heading”.

It ranges from h1 to h6, and the higher the number, the larger the headline.

Since the h tag is a heading, it is necessary to be aware of the hierarchy .

For example, the hierarchy is not correct even if h4 is written even though h3 does not exist next to h2.

Be careful to write h3 after h2 and h4 after h3.

Writing multiple h3s after h2 is fine.

Generally, the smaller the number in the h tag, the larger the text. Please note that the size will differ depending on the browser you are using.

p-tag

The p tag is an HTML tag for creating paragraphs, and takes the initials of “paragraph” which means paragraph.

The p tag is used when writing sentences.

You can type sentences without p tags, but you need p tags when you want to add paragraphs or decorate .

a tag

The a tag is used when you want to link to another URL or move to a different location on the same page.

“a” is an abbreviation for “anchor,” which means anchor or support.

The a tag can create links by enclosing images and characters that you want to link to various URLs .

It is used when creating menus and buttons.

HTML
<ul>
    <a href="https://web-camp.io/magazine/"><li>home</li></a>
    <a href="https://web-camp.io/magazine/"><li>menu</li></a>
    <a href="https://web-camp.io/magazine/"><li>contact</li></a>
</ul>

If the a tag is not decorated with anything, it will be underlined and the color will be blue.

span tag

The span tag is used when you want to change the decoration of part of the sentence or element.

Span has meanings such as duration and short time, and in HTML it means part .

The span tag is often used when you want to make only part of the sentence red or bold.

HTML
<p>一部分を<span>赤い太文字</span>に変化させます。</p>

CSS
span{
  color: red;
  font-weight: bold;
}

Since the span tag is an inline element, it can be written in a sentence.

img tag

The img tag is for inserting images.

img is short for “image” which stands for image. The img tag describes src and alt inside the tag.

Here is a simple description example.

HTML
<img src="computer.jpg" alt="パソコンの画像">

The img tag doesn’t need a closing tag .

Write the location and file name where the image is saved in the src in the tag.

alt describes what the image is meaningful for.

The alt is not displayed on the website, but it is important from an SEO point of view. Try to describe as much as possible.

ul, ol, li tags

The ul tag is an acronym for “unordered list”, meaning an unordered list.

Conversely, an ordered list uses the ol tag (ordered list).

The li tag is used in combination with the ul tag and ol tag, and is simply a tag for creating a list.

Remember that the li tag should be written as a set with the ul tag or ol tag .

HTML
<ul>
    <li>ホーム</li>
    <li>メニュー</li>
    <li>コンタクト</li>
</ul>
<ol>
    <li>見て</li>
    <li>書いて</li>
    <li>覚える</li>
</ol>

Consider the meaning of the list you create, and use ol and ul tags accordingly.

nav tag

The nav tag is a tag used when creating the menu displayed at the top of the website, and is an abbreviation for “navigation”.

It’s basically a tag to create a menu block that serves as the navigation for your website.

HTML
<nav>
<ul>
    <li>ホーム</li>
    <li>メニュー</li>
    <li>コンタクト</li>
</ul>
</nav>

A div tag is fine, but use a nav tag for clarity.

input tag

An input tag is a tag that creates a field for users to enter information on an inquiry page, etc.

You can create the part where you write your name and the part where you put a check mark on the inquiry page with the input tag.

In addition, the input tag is an indispensable tag for the inquiry page, such as creating a button to send .

You can also create a password entry field and a button to delete the entered content.

style tag

The style tag is a tag for writing CSS within the head tag.

In general, the CSS file is read with the link tag and styled, but by using the style tag, you can write CSS in the HTML file .

HTML
<head>
    <meta charset="UTF-8">
    <title>WebCamp</title>
    <style>
        h2{
            color: blue;
        }
        p{
            color: red;
        }
    </style>
</head>
<body>
     <h2>styleタグ</h2>
     <p>styleタグで装飾しました。</p>
</body>

Remember that you may write only the part that you do not want to decorate with CSS files in the style tag.

header tag

As the name suggests, the header tag is used to create a header.

When creating the header block, enclose it in the header tag and insert the logo or menu inside it.

A div tag can also be used as a substitute, but using a header tag is easier to understand in terms of code, and is easier for people to understand when evaluating your website.

HTML
<header>
    <div class="logo"><img src="computer.jpg" alt=""></div>
    <ul>
        <li>HOME</li>
        <li>MENU</li>
        <li>CONTACT</li>
    </ul>
</header>

footer tag

The footer tag is used to create footers .

Similar to the header tag, create a footer block by enclosing it in footer tags.

Use footer tags instead of div tags because footer blocks are easier to understand in code.

Explanation of frequently used CSS properties

After the frequent HTML tags, let’s look at CSS properties.

There are more CSS properties than HTML tags, and the range of expressions is wide.

Therefore, it is difficult to understand everything, but you should remember the CSS properties that are frequently used.

Here are 10 frequently used CSS properties.

font series

The font-related CSS properties set styles such as the type, size, and weight of characters.

Four commonly used font properties are summarized in the table below.

Property type	meaning
font-size	Decide on the size of the font. You can use px, rem, and em as units.
font-family	Select a font type. It’s common practice to specify it site-wide rather than specifying it for each element.
font-style	It is used when you want to italicize the text.
font-weight	Adjust the thickness of characters. There are two methods, one is to write in 3 digit number and the other is to write in English such as bold.

The CSS property that determines the font should be understood first.

This is because legibility and decoration of characters are important when creating a website .

Here is a code example using font properties.

CSS
html{
  font-family: Arial, Helvetica, sans-serif;
}
p{
  font-size: 16px;
  font-style: italic;
}
span{
  font-size: 20px;
  font-weight: bold;
  color: red;
}

Just by combining font-based CSS properties, you can expand the range of character expression.

First, let’s understand the properties of the font system.

background system

The background series are CSS properties that implement background decorations.

You can change the background color or set an image.

You can also set the size and size of the background image in detail .

First, the background properties are introduced in the table below.

Property type	effect
background-color	Set a color for the background. Specify colors with keywords, rgba, or hexadecimal numbers.
background-image	Set an image as the background. Enter the image path and file name in url().
background-position	You can specify the position of the image specified in the background. You can specify not only keywords such as top, but also % and px.
background-repeat	Sets the repeating background image. If the background image is small, it will be displayed repeatedly by default.
background-attachment	Set to fix the background image when scrolled.
background-size	Set the size of the background image.
background	Background settings can be set collectively.

Background properties are rarely used alone, and each property must be combined.

Especially when setting an image as the background, you need to specify the size and location of the image in detail, so remember the properties introduced this time.

color

The CSS color property decorates the color of text.

The color property can be specified with the following three values.

value	Description method
keyword	If red, red. If it is blue, specify it with a keyword such as blue.
rgb	Adjusts the ratio of r (red), g (green), and b (blue) from 0 to 255.
Hexadecimal	Adjust red, green, blue in hexadecimal (0~f).

You can specify any value, but we recommend using rgb or hexadecimal.

This is because it is difficult to make detailed color adjustments with keywords, and the types of colors that can be specified are limited.

Basically, use either rgb or hexadecimal and try to be consistent within the same website.

Here is a code example using the color property.

CSS
.keyword{
  color: red;
}
.rgb{
  color: rgb(255, 0, 0);
}
.sinsuu{
  color: #ff0000;
}

The same red can be specified in any description method. Experience how the colors change while actually adjusting each value.

width

width means “width” in English. The width property in CSS also adjusts the width of the element.

Every website uses the width property, so it’s one of the must-learn properties.

This is because the width of the block must match the width of the screen used by the user .

The width property can be specified not only in px but also in relative values ​​such as % and vw.

Here is a simple code example using the width property.

body{
  width: 500px;
}
.yokohaba1{
  background-color: green;
  width: 200px;
  height: 50px;
}
.yokohaba2{
  background-color: grey;
  width: 50%;
  height: 50px;
}
.yokohaba3{
  background-color: hotpink;
  width: 10vw;
  height: 50px;
}

You have to know which number to base each value on.

height

height means “height” in English. The height property in CSS also specifies the height of the block.

The value is determined by px, %, and vh, just like the width property.

However, if you specify the height with the height property, the display may collapse, so be careful when using it.

Here is a simple code example using the height property.

body{
  width: 500px;
  height: 500px;
}
.tatehaba1{
  background-color: green;
  width: 200px;
  height: 50px;
}
.tatehaba2{
  background-color: grey;
  width: 200px;
  height: 5%;
}
.tatehaba3{
  background-color: hotpink;
  width: 200px;
  height: 10vh;
}

Care must be taken when using vh, as it will change with the height of the screen.

Let’s understand how each value is displayed.

margin

White space is essential when creating a website.

This is because if there is no white space between all blocks and elements, it will be very difficult to see.

White space is also necessary for good layout of each block or element.

The margin property should be mastered to insert white space between blocks and elements .

Here’s a simple code example using the margin property.

CSS
.yohaku1{
  background-color: green;
  width: 200px;
  height: 50px;
  margin: 10px;
}
.yohaku2{
  background-color: grey;
  width: 200px;
  height: 50px;
  margin-bottom: 20px;
}
.yohaku3{
  background-color: hotpink;
  width: 200px;
  height: 50px;
  margin-top: 30px;
}

For the margin property, there are two ways to specify the outer margins all at once, and to insert margins by specifying the top, bottom, left, and right.

The table below shows how to write the margin property.

property	effect
margin	Specify top, bottom, left, and right all at once. If there is one number, specify top, bottom, left, and right; if there are two numbers, front is top and bottom, back is left and right; if there are four numbers, top, right, bottom, and left are specified clockwise.
margin-top	Use this when you want to insert padding only above the element.
margin-bottom	Use this when you want to insert padding only below the element.
margin-left	Used when you want to insert a margin only to the left of the element.
margin-right	Use this when you want to insert padding only to the right of the element.

In addition, the margin property has the characteristic of canceling out the margins of adjacent elements.

Remember that if you specify a margin property for each, the larger number of margins will apply. It is the basis for using the margin property.

padding

While the margin property is the space between elements, the padding property is the property that inserts the space inside the element .

By inserting white space in the element, it has a role to arrange the inside of each element.

Here’s a simple code example using the padding property.

CSS
.yohaku1{
  background-color: green;
  width: 200px;
  height: 20px;
  text-align: center;
  padding: 10px;
}
.yohaku2{
  background-color: grey;
  width: 200px;
  height: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.yohaku3{
  background-color: hotpink;
  width: 200px;
  height: 20px;
  text-align: center;
  padding-top: 10px;
}

As with the margin property, the padding property can also insert an inner margin by specifying one of the top, bottom, left, and right directions. The description method is the same as the margin property.

border

border is a property for displaying borders.

It is used when you want to enclose the outside of an element with a line or to draw an underline .

Properties related to the border property are introduced using a table.

property	effect
border-width	Specifies the thickness of the border in px.
border-color	Specifies the border color.
border-style	Specifies the border type. Dotted lines, double lines, etc. can be specified.
border	Specify the type and color of the border all at once.
border-radius	You can adjust the roundness of the border rectangle.

The border property can express various borders by specifying the type, color, etc.

In addition, you can specify the top, bottom, left, and right borders separately, or draw a border in only one direction, so you may design using only the border property.

Here is a simple code example using the border property.

HTML
<div class="kyoukai"></div>
<div class="kyoukai2"></div>
<div class="kyoukai3"></div>

CSS
div{
  margin: 30px;
  width: 200px;
  height: 30px;
}
.kyoukai{
  border: 1px solid red;
}
.kyoukai2{
  border-width: 2px;
  border-style: dashed;
  border-color: green;
}
.kyoukai3{
  border: 3px double blue;
  border-radius: 10px;
}

List of HTML tags and CSS properties introduced this time

This time, I introduced 12 frequently used HTML tags and 8 CSS properties.

The table below lists the properties and effects of each.

HTML
tag name	effect
div	Create blocks. They are often written for decorative purposes.
h	Create a headline. You can specify h1~h6.
p	Create a paragraph Specify when writing.
a	Create a link Link to other sites or designated places on the same page.
span	It is used when you want to add decoration to a part of sentences.
img	Used when inserting an image.
ul, ol, li	make a list. ul creates an unordered list and ol creates an ordered list.
nav	Used when creating navigation blocks.
inputs	It is used when creating input fields and checkboxes for user input.
style	It is used when describing CSS in the HTML file.
header	Used when creating a block of headers.
footer	Used when creating a footer block.
CSS
property name	effect
font series	It is used to decorate the type, size, and thickness of characters.
background system	Used to decorate the background.
color	It is used when changing the character color.
width	Specifies the width of block elements, etc.
height	Specifies the vertical width of block elements, etc.
margin	Specifies the margins outside the block.
padding	Specifies the inner padding of the block.
border	Represents block boundaries.

There are many other tags and properties in HTML and CSS.

First, remember the frequently used tags and properties, and then learn other tags and properties while writing code.

Even if you don’t always memorize it, you can write the code while searching.

Remember, being able to reproduce your design accurately is your number one priority .

summary

Understanding HTML tags and CSS properties is the first step to mastering coding.

Understanding the meaning of tags and properties and having the ability to make selections is necessary to create the desired layout .