DEV Community

Joshua Jones
Joshua Jones

Posted on

Learning HTML

HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
Image description

Image description

Headings < h 1> </ h 1> Go from largest to smallest as it increases. h1 being the largest and h6 being the smallest.

< div> is short for division. It allows you to group HTML elements to apply the same styles.

Paragraphs (< p >) contain a block of plain text.
< span > contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
The < em> tag will generally render as italic emphasis.
The < strong> will generally be rendered as bold emphasis.
< br > creates a line break element. (creates space)
< ul > Creates a bulleted list of items that need to be used < li > to make the list.
< ol > creates an ordered list

Image description

< img > allows you to add an image
Image description

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.

< video > allows you to display a video that requires a src
Image description

The controls attribute instructs the browser to include basic video controls like pausing and playing.

HTML Files

< !DOCTYPE html >, the declaration specifying the version of HTML for the browser
The < html > tags that enclose all of your HTML code
The < head > tag that contains the metadata of a webpage, such as its


Image description

< a > anchor element. It is incomplete without the Href attribute. This is to hyperlink to other sites.
Target attribute requires a value of _blank to make the link open into a new window.

Image description

wrapping a link around and image instead of just text.

Image description

Comments begin with <!-- and end with -->. Any characters in between will be ignored by your browser.

Image description

Top comments (1)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Hey there, nice post! Did you knew you could highlight your code in DEV? Here's a formatting guide in case you need some help troubleshooting. Best of luck!