HTML & CSS References
HTML Elements
HTML elements are defined by opening and closing tags, with some content within it. An HTML element is one single component of a document, whereas multiple HTML elements make up a whole document. HTML is a structured markup language, meaning that it has some specific rules for how to implement elements. When it comes to using HTML elements, we have to use the predefined elements as these elements contain meaning that is communicated to our browser.
HTML Layout Elements
HTML Layout elements are used to give structure to our HTML content. When our HTML page is loaded in the browser, different elements may look the same, but communicate their meaning differently. Layout elements are one category of semantic elements. There are two mandatory layout elements within an HTML document: The <head> element, and the <body> element.
HTML Head Element
The HTML head element is used to send information to the browser that the user doesn’t necessarily see. What’s usually included in the <head> element are links to external stylesheets (these hold our CSS styles), meta tags which define important metadata about the document, the site’s title tag, as well as script tags which allow the embedding of scripts into the document.
HTML Semantic Elements
HTML Semantic Elements are elements that communicate meaning to the browser. We use semantic elements to help our browser understand the meaning of our content. For example, some elements we may use are <header>, <nav> or <main>. A header element may contain our navigation bar, where we use our nav element to structure the content within. Our main element may contain the main content for our webpage. We can reuse these elements as many times as we want to, but sometimes, based on the meaning of the tags, we may only use them once per page.
For example, we will probably only have one header and one main element per page. But we may have a site navigation menu as well as an in-page navigation menu, both of which use the <nav> element to communicate to the browser that the content within is used to navigate through the website or the webpage.
HTML Div
The div tag is an example of an HTML element, but not a Semantic HTML Element. Before semantic tags were introduced, the <div> tag was the only tag available to divide your page into meaningful chunks. While the <div> tag is still a valid way to section content, it doesn’t convey the meaning of each section and how each section is distinguished from one another. For example, we may use a <nav> element rather than a <div> element to convey that this specific piece of HTML markup is a navigation bar.
HTML Quotations
HTML Quotations are a type of semantic element that defines a quote from an external source. There are two types of quotation elements: <blockquote> and <q>.
A <blockquote> element is used to define a long form piece of content that is taken from an external source. Usually a browser implements some styling to indent this quote.
A <q> element is used to add double quotations surrounding the content within the tags. This element is not used very often since HTML documents render quotations.
HTML Block vs. Inline Elements
Block and Inline are two different values of the display property on an HTML element. HTML elements take up a certain amount of space when rendered in the browser.
An inline element’s width and height are purely defined by the height and width of the content of the element. You also can’t manipulate the height and width of the element if the element’s display is inline. Inline is the default display for <span> or <q> elements for example. Inline elements are usually used for text elements where we don’t want to break the original flow.
A block element’s height is defined by the height of the content, but by default, a block element takes up 100% of the available width. This means that it will stretch to fill the width of the parent container. This means that two block tags will never show up side by side in the browser. The height and width of a block element can be manipulated by targeting the proper css properties of the element. If the width or height changes to be something smaller than 100% of the available space, the rest of the space will be filled with a margin. Block is the default display for the majority of elements, <div> or <p> for example.
There is one more default property for display, being inline-block. An inline-block element is a bit of a hybrid of both inline and block elements.
Learn HTML & CSS Today
Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform – no downloads or complicated setup required.
- Free and fun
- Designed for beginners
- No download or setup required