How to code HTML5 links
Most web pages contain links that go to other pages within their own website or external resources around the web. To code links you use the a anchor element. This element is considered an inline element, which you usually code it within a block element like a p element.
In most cases, you will only code the href attribute for the a element. This attribute specifies the URL for the link you want to share. Again this can be a resource of your own or from another website.
By default, links are underlined and a blue font color when displayed in a broswer to indicate that they’re clickable. As a result, most web users have been conditioned to associte underlined text with links. Knowing that, you should usually avoid underlining any other text on your web pages. When the link has been visited, by default the color will change to purple. Remember, you can change this within your CSS file and make the colors anything you want.
How to code HTML5 lists
There are two types of lists you can use when making lists on your web page. One is the Unordered List (ul) and the second is Ordered List (ol). Within both of these lists you will list your items by using li. By default, an unordered list is displayed as a bulleted list and an ordered list is displayed as a numbered list.
When you use the li element, you should be aware that it can contain text, inline elements, or block elements. Example, an li element can contain an a element that defines a link. In fact, it’s a best practice to code a series of links within an unordered list.
How to code HTML5 images
Images are an important part of your web pages. These help grab the users attention and attraction to the website. To display an image, you use the img element. This is an inline element that’s coded as an empty tag.
The src (source) attribute of an img element specifies the URL of the image you want to display, and it’s required. You can files within your website files or you can use an image from another actual URL to display.
Images that you will include in a web page need to be in one of the formats modern browsers support. Currently, most browsers support JPEG, GIF, and PNG formats. You will want to use imaging software such as Adobe Photoshop or something like it to make your images the perfect size you want. Make sure the image size isn’t too big either. The larger the image size the longer it can take your page to load. Google doesn’t like slow web pages.
For best SEO guidelines you want to always code your image with the alt attribute that describes the image. So for example, if you have an image of a pirate ship then describe that pirate ship in a few words. Another hint, throw in some of your keywords here if you can. It’ll help search engines rank your site better overtime.
Check out more of my training vidoes here.
If you want to learn lots more about HTML5 check out WC3 Schools. They have plenty of information with helpful examples you can try out yourself.