Today, I wanted to highlight some of the more commonly used HTML elements used, as well as their functions and attributes. Let’s start with what an HTML Element is. An HTML Element is a type of component within HTML that have specific attributes. Each element will have a beginning and end tag. For example, if I wanted to display the the text “Hello World”, in HTML it would appear as <p>Hello World</p>. Those <p> and </p> tags before and after the displayed text are the tags, indicating the text in between should be shown on the web page in the paragraph formatting (which can be changed using CSS). Let’s now jump into the tags
This tag will typically be shown at the top of a page, and include a lot of information that won’t be available to the viewer at first glance. This could include the title of the page, any scripts that are included in the page to make it run, and any links to style pages included. To the every-day user, the head tag will be somewhat important, but not readily available, as it has to do with more “how” the page looks as opposed to what is on the page.
Any tag that starts with the letter h, and is followed by a number is a header tag. Any number between 1 and 6 can be used within the h tag, and each number will correspond to a different type of header, usually becoming smaller as the number gets higher. So, h1 would be the biggest and boldest header line, while h6 may be the smallest. There are typically used on webpages to indicate titles or subheadings within text blocks.
<ol> and <ul>
Both of these are used when establishing a list to be displayed on a webpage, but they have some differences. the <ol> tag is used for what is known as a “ordered list”. Think of a list that requires numbers, such as a recipe or a set of instructions. This is an example of an ordered list, as each point follows another in succession. As you may have guessed by this point, the tag <ul> stands for unordered list. This list is set up similar to bullet points. Think of this list as a to-do list, where each item does need to be done, but not in any particular order. Either tag will still require the use of another tag, <li>, which establishes another item on either list.
The <br> tag enters a line-break in the text block wherever it is entered. For example, in a poem written on a webpage, a line break may be needed between stanzas, which is where the <br> tag is placed.
The <a> tag stands for anchor, and is one way to establish a hyperlink to another webpage. The anchor tag is a little different to those we have explored up to this point. While every other tag follows the same “<tag>content</tag>” format, the anchor tag includes an attribute known as “href”. This allows for the destination to wherever the anchor tag is being tied. For example, if I wanted to include a link to the Wikipedia page for HTML within my code, using the title “HTML Language”, I may code it as
<a href=’https://en.wikipedia.org/wiki/HTML’><h1>HTML Language</h1></a>
As you can see, the beginning <a> tag includes the href attribute as part of the tag, but is still closed by the </a> tag at the end.