프로그래밍/HTML

<html> tagRanking, br vs p tag, imgTag

그리고보니 2020. 11. 3. 19:41
728x90

tagRanking

 

brTag

<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<br><br>

HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects, 

such as interactive forms, may be embedded into the rendered page.
It provides a means to create structured documents by denoting structural semantics for text such as headings, 

paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.

 

br은 2개 이상 사용하면 단락처럼 보이는 효과를 받을 수 있다. 

br = 줄 바꿈 태그 

 

pTag

 

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages

</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them 

into multimedia web pages.
HTML describes the structure of a web page semantically 

and originally included cues for the appearance of the document.</p>
<p>HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects, such as interactive forms, 

may be embedded into the rendered page.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.</p>

 

 

결과를 보면 p태그와 br태그는 다르지 않다.

하지만 p태그는 br태그와 비교했을 때  정해진 여백만큼만 벌어지기 때문에 시각적인 자유도에서 떨어진다. 

br태그는 사용하면 사용하는대로 여백이 넓어지지만 p태그는 아니다. 

 

<h1>HTML</h1>
<p><p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

</p>
<p>HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.</p>

 

결과는 다음과 같다.

하지만 p태그에는 br태그에는 없는 css적인 요소를 적용함으로써 이 단점을 해소할 뿐만아니라. 

정보로서 좀 더 가치있는 html이 된다. 

 

<h1>HTML</h1>
<p style="margin- top : 100px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<p>HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.</p>\

 

위에 적혀있는 <p style="margin-top:100px;">을 보자 그리고 다음과 같이 결과가 변경된다. 

 

 

■imgTag

 

<h1>HTML</h1>
<p style="margin- top : 100px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them into 

multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of 

the document.</p>
<img>
<p>HTML elements are the building blocks of HTML pages.
With HTML constructs, images and other objects, such as interactive forms, 

may be embedded into the rendered page.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.</p>

 

결과엔 차이가 없다.

어떤 이미지를 추출할 것인지 지정해주지 않았기 때문이다. 

따라서 jpg 이미지를 다운받고 현재 작업중인 디렉토리에 저장시켜 준 후 다음과 같이 코드를 변경한다.

 

<h1>HTML</h1> 
<p style="margin- top : 100px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications. 
Web browsers receive HTML documents from a web server or from local storage and render them into

multimedia web pages. 
HTML describes the structure of a web page semantically and originally included cues for the appearance of 

the document.</p> 
<img src ="coding.jpg"> 
<p>HTML elements are the building blocks of HTML pages. 
With HTML constructs, images and other objects, such as interactive forms, 

may be embedded into the rendered page. 
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
HTML elements are delineated by tags, written using angle brackets.</p> 

 

그림이 너무 크므로 width 속성값을 통해 크기를 줄여주자.

 

<h1>HTML</h1> 
<p style="margin- top : 100px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications. 
Web browsers receive HTML documents from a web server or from local storage and render them into

multimedia web pages. 
HTML describes the structure of a web page semantically and originally included cues for the appearance of 

the document.</p> 
<img src ="coding.jpg" width="15%"> 
<p>HTML elements are the building blocks of HTML pages. 
With HTML constructs, images and other objects, such as interactive forms, 

may be embedded into the rendered page. 
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
HTML elements are delineated by tags, written using angle brackets.</p> 

 

속성값의 순서 여부는 상관없다. 

<img src="coding.jpg" width="15%">

<img width="15%" src="coding.jpg">

 

 

728x90

'프로그래밍 > HTML' 카테고리의 다른 글

liTag, olTag&ulTag, TitleTag 및 태그의 구조  (0) 2020.11.05
<HTML tag> strong, hTag  (0) 2020.11.03