I was trying have block of text go below my main on header on my home page (a sub-header, if you will), but I kept encountering problems in terms of styling this block so that it was aesthetically pleasing (or at the very least not disturbingly hideous). I played around with various tags (<div>,<h2>,etc) to find something that worked but to no avail. Below is what one of the best of the worst iterations I was able to put together looked like (unfortunately, I did not think take screen shots of the really bad ones) :
I then found out about a class of <div> called “byline.” I edited my html to include a “byline” div within my “header” div so that my code looked like this:
The results looked like this when I previewed them.
Although I liked this, I wanted to further distinguish the byline from the header, to I added an <hr> tag to the code (which inserted a line between the two blocks of text):
The resulting page looked like this:
While this is still pretty ugly, the “byline” div, combined with the <hr> tag gave me a better point from which to start making the whole thing look nicer.