Intro to Block and Inline Elements

Block Level Elements

Block level elements are typically used for text and can contain inline elements and other block level elements. Block level elements begin new lines for text and create boxes around the element as it is increased or decreased in size. These are some of the block level elements used in HTML:


The "<p>"

tag is used for paragraphs of text.


These tags are used as headings, each tag should be used as a hierarchy. The headings tell search engines what the page is about. The

"<h1>"tag is the most important in this aspect.


"<div>" tags hold the pages content and create divisions around it to place the content exactly where the writer wants. These tags generally include the websites heading, navigation and content in separate tags.

    The "<ul>" tag stands for unordered list and is used to make lists that have no order.

          "<ol>" tag stands for ordered list and is used for lists that are in a specific order such as a numbered list or a list that is orderd alphabetically.




      The

              "<li>
      " tag is used for list items inside of an unordered or ordered list. each list item must be displayed in its own
          • tag with a closing tag.


      The

          "
          "

      tag creates a horizontal line in the content to divide the pages content. This tag does not require a closing tag as it closes itself

       

      Inline Elements

      Inline elements are typically small portions of code that exist only on a line or two of text. They do not change the height or width of the page and are only used inside block level elements. They cannot have block level elements inside of them. These are some examples of inline elements:


      "" tags are used to make text bold, just like how the heading of this section is displayed. The font is thicker than normal text.

      ""

      The tag stands for emphasis and makes text italic like this.

      ""

      "" tags are called anchor tags and be used for links. These tags are used to connect to somewhere else on the internet weither it is another website, a downloadable file, or an email address.

      ""

      "" tag is used for images.

      ""

      The span tag is used to define the style of an inline element. As an example, a span tag can be used to make one word red inside of a paragraph.

      The
      or break tag is used to make a line break, and will bring an inline element to the next line.


      Take the quiz »