모든 WordPress 사용자가 알아야 할 기본 HTML 코드

게시 됨: 2019-04-24

HTML은 인터넷에 있는 거의 모든 것의 기초입니다. 그것은 인터넷 콘텐츠가 구축되는 초석이며 수십 년 동안 이어져 왔습니다. HTML에 대한 확실한 이해가 없으면 WordPress 또는 기타 웹 디자인 및 개발로 수행하는 모든 작업이 중단됩니다. 다행스럽게도 초보자부터 베테랑까지 모든 WordPress 사용자가 거의 매일 사용하는 기본 HTML 코드가 많이 있습니다. 그것들을 분해하고 속도를 높이도록 합시다.

YouTube 채널 구독

HTML이란 무엇입니까?

다음은 빠른 버전입니다. HTML은 하이퍼텍스트 마크업 언어 를 의미합니다. 이는 프로그래밍 언어가 아니라는 의미입니다. HTML은 스크립트를 통해 작업을 실행하도록 컴퓨터에 명령하지 않습니다. 오히려 페이지에 있는 텍스트를 가져와서 표시합니다. 기울임꼴, 굵게, 맞춤, 크기 등. HTML은 또한 이미지와 링크를 포함할 수 있는 기능을 제공하며 HTML5를 사용하면 최신 버전에서 이미지와 링크를 흥미롭고 새로운 방식으로 조작합니다.

HTML 코드는 플래그 내에 포함되어 있으며 읽기가 매우 쉽습니다. 간단한 HTML 페이지는 다음과 같습니다. 

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

브라우저에서 렌더링하면 다음과 같습니다.

기본 HTML 코드

보시다시피 HTML은 그렇게 혼란스럽지 않습니다. 사실, 이전에 HTML 코드를 본 적이 없더라도 문맥만으로 각 태그가 무엇을 의미하는지 알 수 있을 것입니다. 그런 점을 제외하고 웹에서 경력 전반에 걸쳐 사용할 가장 일반적이고 기본적인 HTML 코드를 살펴보겠습니다.

용감한

텍스트를 <strong> 태그로 감싸면 브라우저에 텍스트를 굵게 표시하도록 지시하는 것입니다. 단순히 <b> 를 사용할 수도 있지만 의미 체계 코딩을 선호하는 Google 및 기타 검색 엔진에서는 <strong> 을 사용하는 것이 더 안전합니다.

You can make <strong>text bold</strong> by using this tag.

기울임꼴

<Em> 은 강조 를 나타내며 HTML에서 기울임꼴을 사용하는 의미론적 방법입니다. <i> 를 사용하여 그렇게 할 수도 있습니다.

You can put <em>text in italics<em> by using this tag.

밑줄

<u> 와 밑줄도 마찬가지입니다. 일반적으로 링크에 밑줄이 그어져 있고 클릭할 수 없는 밑줄이 그어진 텍스트는 나쁜 사용자 경험을 제공하기 때문에 이것은 거의 사용되지 않습니다.

You can <u>underline</u> by using this tag.

제목

아마도 모든 기본 HTML 코드 중 가장 많이 사용되는 것은 다양한 제목일 것입니다. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 을 사용하여 콘텐츠를 섹션으로 나눕니다.

반드시 계층적 순서로 사용하십시오. Google은 제목을 중첩하기를 원하므로 <h3> 아래가 아니라 <h1> 아래에만 <h2> 를 사용해야 합니다.

대부분의 페이지에는 하나의 <h1> 만 포함 되지만 Google은 더 이상 더 이상 사용자에게 불이익을 주지 않습니다. <h1> 을 사용하면 페이지(또는 최소한 페이지의 해당 섹션)에 대한 중첩이 재설정된다는 점을 명심하십시오.

<h2>H2 is the most commonly used header tag.</h2>

이 페이지의 HTML 요소에 대한 모든 헤더는 h2 입니다.

영상

이미지 삽입은 HTML이 하는 가장 유용한 작업 중 하나입니다. 그것은 잔인한 스타일에서 인터넷을 깨고 오늘날의 위치에 도달했습니다. 원하는 이미지의 URL을 갖고 하나의 <img src> ( 이미지 소스 태그를 나타냅니다. 다음과 같이)를 입력하기만 하면 됩니다.

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

이미지 태그를 닫을 필요가 없으며 이미지를 표시하는 데 따옴표가 필요하지 않습니다. 많은 사람들이 여전히 코드를 더 읽기 쉽게 만드는 데 사용합니다.

<alt> 속성은 접근성을 위해 표시되는 텍스트이며 검색 엔진에 의해 인덱싱되기도 합니다. 스크린 리더 및 기타 장치를 사용하는 사용자의 경우 인터넷을 사용하려면 대체 텍스트가 절대적으로 필요합니다. 이미지에 대체 텍스트를 사용하는 것이 항상 모범 사례입니다.

연결

괜찮아. 연결. 링크와 관련하여 많은 일이 일어나고 있습니다. 또는 링크로 할 수 있는 일이 많습니다. 가장 기본적으로 <a href> 태그와 함께 사용합니다. <a> 는 링크임을 나타내고 <href> 는 말 그대로 링크하는 위치에 대한 하이퍼텍스트 참조(URL)입니다.

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

</a> 로 링크 코드를 닫고 그 사이에 원하는 텍스트를 사용할 수 있습니다. 그것은 클릭 가능한 링크 자체가 되며 앵커 텍스트 라고 합니다 .

다음과 같이 페이지에 렌더링됩니다. Divi 페이지에 대한 링크이며 이것은 앵커 텍스트입니다.

또한 HTML 코드도 중첩할 수 있습니다. 링크 플래그 사이에 <img src> 태그를 삽입하여 이미지를 클릭 가능하게 만들 수 있습니다.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

여기에서 클릭 가능한 이미지 링크가 어떻게 렌더링되는지 확인할 수 있습니다.

이미지 핫링크를 위한 기본 HTML 코드

추가 링크 속성

또한 링크에 꽤 많은 다른 속성을 포함하여 특정 방식으로 작동하도록 할 수 있습니다(예: 참조자가 되지 않도록 URL을 숨기거나 새 창에서 링크 열기). 당신에게 가장 유용한 것 중 일부는

  • rel 은 링크와 대상에 대한 일종의 관계를 나타냅니다. 추천 트래픽이 귀하에게 역추적되는 것을 방지하기 위한 noreferrer 와 같은 것입니다.
  • target 은 링크를 열 위치를 브라우저에 알려줍니다. 예를 들어 _blank 는 링크를 빈 탭에서 엽니다.
  • nofollow 는 rel 과 함께 검색 엔진에 대상 사이트에 대한 링크 주스를 전달하고 싶지 않다고 알려줍니다. 논란이 되는 내용 등을 링크할 때 좋습니다. 또한 사람들이 귀하의 댓글에 스팸 링크를 보내지 않도록 하고 노출 및 클릭률 외에는 추천에 대한 보너스를 제공하지 않기 때문에 귀하의 콘텐츠가 편견 없이 보일 수 있도록 합니다.

더 있지만 가장 자주 볼 수 있는 것들입니다.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

취소선 텍스트

너도 나 같으면 가끔 필요 생략된 단어를 사용하여 농담을 하고 싶습니다. 또는 목록에서 항목을 표시해야 할 수도 있습니다(또는 코드 자체에서 말하는 것처럼 삭제). 또는 텍스트를 통해 실행되는 줄이 필요한 다른 모든 것.

그 때 취소 하려는 텍스트 주위에 <del> 을 사용합니다. 어떤 사람들에게는 이것은 매우 일반적인 코드이지만 다른 사람들은 사용하지 않을 수도 있습니다. 어쨌든 기억하기 쉬운 것입니다.

You can use <del>this code</del> for strikethrough text in HTML.

기울기

목록은 오늘날 웹 콘텐츠의 또 다른 주요 부분입니다. 그들은 당신에게 많은 여백을 주고 텍스트의 벽을 무너뜨릴 뿐만 아니라 당신의 생각을 소화 가능한 조각으로 정리할 수 있게 해줍니다.

기본 HTML 코드로 만들 수 있는 목록에는 두 가지가 있습니다. 1, 2, 3 등으로 번호가 매겨진 정렬된 목록 입니다. 정렬되지 않은 목록 은 숫자 대신 글머리 기호 또는 기호(사이트 디자인에 따라 다름)를 사용합니다.

순서가 지정되지 않은 목록 또는 순서가 지정된 목록에 대해 각각 <ul> 또는 <ol> 로 각 목록을 래핑합니다. 그리고 목록의 각 항목은 <li> 로 래핑되어야 합니다.

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

그리고 이러한 코드는 차이점을 보여주기 위해 다음과 같이 렌더링됩니다.

  • 이것은 정렬되지 않은 목록의 일부입니다.
  • 이것도 마찬가지입니다.
  1. 그리고 이것이 주문 목록을 설정하는 방법입니다.
  2. 이것은 목록에 있는 링크입니다.
  3. 그리고 이 링크 텍스트는 굵게 표시 되지만 이 부분은 그렇지 않습니다.

목록에 다른 코드도 중첩할 수 있습니다. 따라서 텍스트를 굵게 표시하고 링크를 삽입하는 등의 작업을 수행할 수 있습니다.

블록 따옴표

WordPress 경력의 어느 시점에서 다른 사람의 웹사이트를 인용해야 합니다. 그것이 <blockquote> 가 들어오는 곳입니다. 복사/붙여넣기(및 속성)하는 모든 텍스트를 <blockquote> 열기 및 닫기 태그로 둘러싸 기만 하면 됩니다.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

페이지에 다음과 같이 표시됩니다.

이 텍스트는 인용문임을 나타내기 위해 특별한 스타일로 표시됩니다.

단락

단락 HTML은 좀 이상합니다. 사용 중인 CMS 및 빌더에 따라 자동으로 각 줄 바꿈을 별도의 단락으로 렌더링할 수 있습니다. WordPress는 HTML을 입력할 때 이 작업을 수행합니다. 그러나 모든 것이 그렇게 하는 것은 아닙니다. 따라서 단락을 분리해야 하고 텍스트 벽이 없으면 각 단락을 <p> 로 감쌉니다. 그러면 브라우저는 각 텍스트 블록을 하나의 연속 블록 대신 별도의 단락으로 표시한다는 것을 알게 됩니다. 기본적으로 브라우저는 달리 지정되지 않는 한 줄 바꿈을 무시합니다.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

줄 및 줄 바꿈

단락과 섹션 사이에 다른 분리가 필요할 수 있습니다. 이때 <hr> 및 <br/> 태그를 사용할 수 있습니다.

<hr> 는 구분선을 어디에나 삽입합니다. 많은 사람들이 사이드바 또는 웹 페이지의 주요 섹션에서 위젯을 분리하는 데 이것을 사용합니다.

<br/> 태그는 줄 바꿈입니다. <p> 중간에 <br/> 을 사용하여 새 단락으로 이동하지 않고 줄을 나눌 수 있습니다(블록 스타일 지정 및 구성을 위해). <br/> 은 자체 닫는 태그로, 그 안에 내용이 포함될 수 없습니다. 이것은 코드 끝에 슬래시로 표시됩니다.

이를 사용하여 나누려는 위치에 삽입하여 텍스트와 단락을 나눌 수 있지만, 이는 좋은 습관이 아니며 HTML, CSS 및 JavaScript를 더 많이 사용하면 단락을 대상으로 지정해야 합니다. 특정 일을 하는 요소. 여기에서 차이점에 대해 자세히 읽을 수 있습니다.

마무리

HTML은 인터넷과 상호 작용하는 데 절대적으로 필요합니다. 웹 개발 및 디자인을 시작하는 사람이든 JavaScript가 사용되기 전의 베테랑이든 모두가 동일한 방식으로 사용합니다. 우리는 여전히 기본 HTML 코드를 사용하여 모든 사이트의 기반을 운영하고 있습니다. 사이트가 아무리 화려하거나 기능이 아무리 고급스럽더라도 링크가 끊어지거나 굵게 표시되어서는 안 되는 항목이 있으면 <a href> 또는 <strong> 태그가 괜찮아.

요즘 가장 많이 사용하는 기본 HTML 코드는 무엇입니까?

enterlinedesign/Shutterstock.com의 기사 특집 이미지