J's Study log

[Web] Html - Tags 본문

Computer Language/Web

[Web] Html - Tags

정우섭 2020. 7. 15. 20:24

Frequency of tags usage

https://www.advancedwebranking.com/html/

 

Tag is like the Alphabet of html.

 

 

<!doctype html> : shows that this file is made as a html file

<title>.....</title> : title of html file (title have high priority in search engine)

<title> of html file

<head>.....</head> : explaination about main text

<body>.....</body> : main text of html file

<html>.....</html> : text between <html> </html> tag describes WEB page, so cover <head> and <body> tags

from Advanced WEB Ranking

 

<!doctype html>
<html>
<head>
<title>J's Study Log</title>
<meta charset="utf-8">
</head>
<body>
<ol>
	<li>list1</li>
	<li>list2</li>
	<li>list3</li>
</ol>
<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for
<strong> creating <u>web</u> pages </strong>and web applications.<br>
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.<br>
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
<p style="margin-top:45px;">HTML elements are the building blocks of HTML pages.<br>
With HTML constructs, images and other objects,
 such as interactive forms, may be embedded into the rendered page.<br>
It provides a means to create structured documents by denoting structural semantics for text
 such as headings, paragraphs, lists, links, quotes and other items.<br>
HTML elements are delineated by tags, written using angle brackets.
</p>
</body>
</html>

King of Tags

<a>.....</a> : most important tag in WEB, link.

- attributes of <a>

   href : allocate which address to link (with 'href', link several web pages as a web site)

   target="_blank" : means "open link in new tab"

   title : tool tips are written

<a href="https://tjqdnwj.tistory.com" target="_blank" title="J's Study Log">My blog</a>

 

 

 

Font

 

<strong>.....</strong> : bold (indicates stronger emphasis : according to W3C)

<u>.....</u> : underline

<em>.....</em> : italic (indicates emphasis : according to W3C)

 

tag b,i have no emphasis at all.

<b>.....</b> : bold(better use CSS)

<i>.....</i> : italic(better use CSS)

 

● font size

    <h1>.....</h1> : heading 1

    <h2>.....</h2> : heading 2

    <h3>.....</h3> : heading 3

    <h4>.....</h4> : heading 4

    <h5>.....</h5> : heading 5

    <h6>.....</h6> : heading 6

 

Paragraph

 

<br> : line break

<p>.....</p> : end paragraph

 

In html the result of 'br' and 'p' is almost same.

 

By using 'br', you can make free size of interval.

 

And the size of interval of 'p' is fixed.

 

But this problem can be solved by CSS.

example

더보기 
<p style="margin-top:45px;">.....</p>

 

So prefer using 'p' tag, because it is purposed to make an interval between paragraphs.

 

 

 

Parent & Child relation

Parent & Child relation literally means that tags are related as parent and child.

 

Things written by child tag also have charicteristics of parent tag.

<a>
   <b>
<a>

Like this simple example the blank in front of tag <b> relates <a> and <b> tags as parent and child.

(<a> = parent tag, <b> = child tag)

 

Also <a> is not always parent tag of <b>.

 

Depending on the situation, the relation between <a> and <b> can be switched.

<b>
   <a>
<b>

But as always there are exceptions, relation of some tags are always fixed.

 

example

더보기

 

<ul> tag,<ol> tag with <li> tag.

<li>list1</li>
<li>list2</li>
<li>list3</li>

Result

       list1

       list2

       list3

 

<ul>
   <li>list1</li>
   <li>list2</li>
   <li>list3</li>
<ul>

Result

  • list1
  • list2
  • list3

 

<ol>
   <li>list1</li>
   <li>list2</li>
   <li>list3</li>
<ol>

Result

  1. list1
  2. list2
  3. list3

'Computer Language > Web' 카테고리의 다른 글

[Web] Node.js - module exports  (0) 2020.07.30
[Web] Node.js - URL  (0) 2020.07.29
[Web] Html - Attribute  (0) 2020.07.17
'Computer Language/Web' Related Articles more
Comments