HTML 001 | Code Academy

HTML

• HTML stands for HyperText Markup Language

span & div tag

• It’s best to use a element when you want to target a specific piece of content that is inline, or on the same line as other text.
• If you want to divide your content into blocks, it’s better to use a
  .

em & strong tag

• The tag emphasizes text, (이탈리어체)
• the tag highlights important text.
• The tag will generally render as italic emphasis.
• The will generally render as bold emphasis.

  ---

  

  ---

ul & ol & li tag

• ul : unordered, 동글뱅이로 목차가 매겨진다

<ul>
  <li>Limes</li>
  <li>Tortillas</li>
  <li>Chicken</li>
</ul>

• ol : ordered

<ol>
  <li>Preheat the oven to 350 degrees.</li>
  <li>Mix whole wheat flour, baking soda, and salt.</li>
  <li>Cream the butter, sugar in separate bowl.</li>
  <li>Add eggs and vanilla extract to bowl.</li>
</ol>

Image location tag

• 이미지 태그는 따로 닫아주는 태그 하나 더 달 필요는 없다

<img src="image-location.jpg" />

alt tag

• The alt attribute, which means alternative text, brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.

<img src="#" alt="A field of yellow sunflowers" />

The alt attribute also serves the following purposes:

1. If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.

2. Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.

3. The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.

If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should be left empty.

Video tag

<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>

• In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

• After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser.

• The controls attribute instructs the browser to include basic video controls: pause, play and skip.

• The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

REVIEW

• Any visible content should be placed within the opening and closing tags.
• Headings and sub-headings, h1 to h6 tags, are used to enlarge text.
• p, span and div tags specify text or blocks.
• The em and strong tags are used to emphasize text.
• Line breaks are created with the
  tag.
• Ordered lists (ol) are numbered and unordered lists (ul) are bulleted.
• Images (img) and videos (video) can be added by linking to an existing source.