HTML (Hyper Text Markup Language)
1. What is HTML?
A markup language for structuring web pages
What is Markup Language?
Tags were originally separate from text and were used to express proofreading symbols or comments in manuscripts, but their use gradually expanded to play a role in expressing document structure. This systematic method of tagging is called a markup language, and it is generally used only to the extent of describing data, so it is distinguished from programming languages like JavaScript. Reference: Wikipedia
Tags were originally separate from text and were used to express proofreading symbols and comments in manuscripts, but their use gradually expanded to play a role in expressing document structure. This systematic method of tagging is called a markup language. It is generally used only to the extent of describing data, so it is distinguished from programming languages like JavaScript.
Think of it as drawing blueprints to build a house.
For example, let's say you're creating a login page on a website.
Then you'll basically need an input form where you can enter ID and password. Also, let's add a button that leads to login and a checkbox asking whether to stay logged in. By writing it in HTML code, you can create a screen like the above.
2. HTML Basic Structure
<!DOCTYPE html>
Specifies that this document is an HTML document
<html>
HTML start tag that constitutes the overall framework of the document
<head>
Declares metadata of the document
<title>
Title of the document, shown in browser tab
<body>
Place where document content is contained
<div>
Means content division, causes line break
<span>
Content container without line break
<a>
Used when inserting links
<img>
Used when inserting images
<input>
Insert text, radio buttons, check buttons
<button>
Insert button
3. HTML Basic Syntax
Inserting Images
ul, li Lists
ul: unordered list
ol: ordered list
input, textarea
4. Semantic Elements
Meaning
semantic: having meaning
ex. When using
<h1>element, which is an element used to express top level heading, the browser not only applies large font size but also gives spacing above and below to make it look like a title
Why Use Them
Because search engines prefer semantic elements β The meaning contained in semantic elements can determine top exposure in search results
When multiple developers work together, it's much more convenient to find meaningful code blocks than to search for
<div>elements, and it's also easier to predict the type of data that will be filled inside elementsTherefore, when writing HTML elements, you need to consider what element can best describe the data you're going to write
Mainly Used Elements
5. Naming Each Area
id
When attaching a unique name. Used only once, actually rarely used
class
When classifying repeated areas by type. Multiple.
Used when classifying repeatedly used elements by type. Therefore, elements with the same class can be inferred as elements classified as the same type
If you need a name that should be used only once, you should use id, not class!
Last updated