HTML/CSS notes: semantic tags, paths, div, and px vs em vs rem

On 2022.12.01, I became a student in the 10th cohort of Zerobase Frontend School (an online frontend course in Korea).

From now on, I'll write down here what I learn and what I want to remember while taking the course.

What semantic tags are

• Tags made to give meaning to tags when designing the HTML structure, so the structure of a site is easier to understand

Semantic tag examples

<h1> </h1> - the top-level heading on this page

<nav> <nav> - the same as a div tag, but it means a box that holds the main links

<header>, <section>, <footer> , <article>, <aside> - layout tags

The a tag

1. Absolute path

: a path you can reach on the internet through a URL

2. Relative path

: (usually) a path that starts from the development environment

: . the path where the current file is

:.. the previous path / parent path

: / separator

The img tag

<img src="path" alt="alt text">

You can give an image width and height values right in the tag, without separate styles. (The same goes for the video tag.)

The div tag

• A virtual boundary, a virtual layout

• display : block;

• Name classes and ids so anyone can tell what they are at a glance

• If you style a parent div, the p tags inside inherit the style, but a button does not.

px, ex, rem

• Usually 16px === 1em === 1rem

• em: if the parent tag has a font-size property, that value is treated as 1em.

• rem: based on the font-size of html

• Why font-size should use rem: when you change the font size setting in Chrome, the text changes automatically to match!!