The anatomy of HTML consists of an opening tag, the content, and a closing tag.
Opening Tag: <>
Closing tag: </> Always contain a (/)
I also learned that there is a hierarchy within the elements.
There are six types of headings (h1-h6) Heading 1 (h1), is the biggest heading, the subsequent headings decrease in size.
One of the most popular elements in HTML are divisions known as divs, which help divide the page into sections. Within that there are attributes that are used to expand an element's tag. Which are added to the opening tag of an element, which can be used to provide info or change the styling. An attribute consists of two parts; the value and the name. Some examples of attributes are id which help identify content in our web pages.
When displaying text; paragraph's or span are used.
Paragraph: Contains a block of plain text
span: Best used when you are trying to separate small pieces of info that are in the same line as the other code
When it comes to styling text some examples are
(opening tag em closing tab)renders italic emphasis
(opening tag strong closing tag) renders BOLD emphasis
For line breaks use
(opening tag br closing tag) You only need a starting tag
If you want to create unordered lists use
(opening tag ul closing tag)
Will create lists using bullet points
If you want to create ordered lists use
(opening tag ol closing tag)
Will create numerical lists
However, in either instance for them to render successfully you must format (opening tag li closing tag) as follows
(opening tag ul or ol closing tag)
(li)Eggs(/li)
(li)Milk(/li)
(li)Bread(/li)
(/ul)
The element (img) will allow you to add an image to a web page
It has self-closing tags,(while using Codeacademy it did not self-close. Need to manually insert closing. (/>)The img is not needed to close.
(img) has a required attribute called src which is basically the URL of the image
To insert an image the line of code would be as follows:
(img src="image-location.jpg"/)
Within an image we can add the attribute alt in order to add a description of the image. This is helpful for visually impaired readers who use text-to-speech tool. Also helpful when image is failing to load. Alt plays an important role in SEO(search engine optimization)since SE's cant "see" alt provides them the capability to render better results. Alt can also improve the ranking of your site since its accessible to a broader audience.
Top comments (0)