HTML #2 ~ HTML Properties

Text Elements

When writing content in HTML, we usually start with a heading to create titles. We use the h1 tag to create the first heading in HTML. We can choose the size of our heading through numbers. 'h1' has the largest size and goes all the way to 'h6' with the smallest size.

Additionally, we can write paragraphs add full text content. Usually these paragraphs would go under headings. In order to use paragraphs, we use the p tag.

// headings
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>

// paragraph
<p>Paragraph.</p>

Lists

Developers use Lists to create an ordered format of texts. There are two types of lists we can use in HTML. Ordered List and Unordered List. Ordered list is numbered, while unordered list uses plain dots.

// Ordered List
<ol>
  <li>Appetizers</li>
  <li>Main Course</li>
  <li>Salads</li>
</ol>

// Unordered List
<ul>
  <li>Cold Drinks</li>
  <li>Hot Drinks</li>
  <li>Ice-Creams</li>
</ul>

Images and Attributes

We add images in HTML using the img tag. Unlike other tags, the image element does not have a closing tag. We simply end with a self-closing tag (/>). Starting with image elements, we can add attributes. An attribute is used to provide additional information about HTML elements. For images, we use the src attribute to link the source of where the image came from. This will help the user know what the image is about in case it does not show on the browser.

<img src="img.jpg" alt="img name" />

Hyperlinks

Hyperlinks in HTML are what enables the internet to be a worldwide web. Links either point to other pages within their own website or pages that are outside in another website. When creating a link, we use the a tag. We also use an attribute known as href in order to specify the url of the designated website. We also write a small description between the opening and closing tag to create a title for the link. We can also use a target attribute and write _blank to open a completely new page to that url.

<a href="https://www.mywebsite.com">Website Link</a>

HTML Page Structure

Developers are encouraged to always write code by semantically structuring their HTML page. For this, there are various semantic tags.

// For navigating links
<nav></nav>

// For structuring headers and texts
<article></article>

// For creating footer information
<footer></footer>