 Hello everyone thank you for being here before I start one quick question how you are at a word come for the first time wow that's a lot of people thank you for being here that's exciting are you enjoying it so far good will you be back perfect thank you so my name is Francesca I'm the WordPress Community Manager at SiteGround the international web hosting company and proud sponsor of work by Miami before doing that I was a freelancer that built websites for freelancers and I taught them how to use them and a lot of time was spent teaching them how to format their content so people will read it and hopefully buy what they're selling so this talk was born out of that six years experience how many of you have heard this slogan content is king it's a very popular one right so it was declared so by Bill Gates in 1996 and I was imagine a king with lavish clothes so I like to think of formatting as a beautiful embroidery that will add some more color and richness to an already beautiful fabric that it's your text this talk will be divided in two parts the first one it's a little bit about the history and the theory of why we do the things we do and why it's so important to format and then we'll go over some options that you will use to format your text so let's start with a little bit of history the web is getting old well you know depending what's your age it turned 29 at the beginning of this week yeah March 12th that's an important date because we all have a job because of it so thank you so sir Tim Berners-Lee wrote a proposal for what we now know as the World Wide Web in 1989 that was deemed vague but exciting by his boss at CERN the Institute of Research and but it got the green light so now we have the World Wide Web so Tim Berners-Lee also wrote the first elements of HTML in 1992 and a few years later he published the specs for HTML 2.0 which is the standard upon which we base all future implementation of HTML we're now at version number five and finally the most important date for our talk here today is October 1st 1997 when Jacob Nielsen who is a word usability and user interface expert conducted a study on a group of about 80 people in the summer of 1997 on how do people read on the web how do people do you read on the web well they don't they didn't in 1997 and they still don't unfortunately this is why people scan content and this is why formatting is so important so we will need the reader through a path and hopefully to the end of your page it doesn't matter if you're writing to share your recipes online or you have a blog with a highly optimized leading landing pages that to convert leads and stuff like that you want people to read what you're writing so this is why you need to format to help them get through the end of that text and you have everything you need to write good copy and format it in a good way in this 20 years old article so you should use lists headings paragraphs bold you know all these elements were already in the first version of HTML so 26 years ago and I'm amazed that we still see a lot of pages there are just a wall of text and that's not helping readers get to the end of the page before we go into formatting with WordPress we'll see a little bit of HTML how does it look like so you can better understand how to organize your text HTML is not a programming language it's a markup language that you will use to define the structure of a content inside a page semantically might seem like a big word but it basically just means that the element itself is describing its own meeting meaning to the browser so if it's a paragraph it's a paragraph I'm saying that it's a paragraph and not a list or a quote or something else all the pages are based on HTML so if you want to go into this business learn HTML and most elements have an opening and closing tag in the form of angular brackets with some exceptions and knowing how HTML looks like will help you fix some problems that might arise when you start formatting all these tags can be added by just pressing buttons on your WordPress but if you want to see what an HTML tag looks like that's the most common you will use and you see most tags are abbreviation of English words so p stands for paragraph block quote is the whole word ordered list ol unordered list u l list item li so if you remember what you're doing then you'll probably remember the tag after a while and this is what it looks like in your website paragraph block quote unordered list ordered list I would like to spend a few moments on the heading element and introduce you to the concept of accessibility so in HTML you have six headings from one to six and they're hierarchical which is a word that I find very difficult in English so bear with me so heading one is more important than heading six don't use heading one inside your page or post they're reserved to the page or post title and that's important for SEO and accessibility reasons so start from age two heading to one of the most common mistake that I see people doing is using those elements non-hierarchically yes I did it so they might use age four because it looks better than age two the style of the element is nicer but it shouldn't be used like this age two age three age four age five age six and the other mistake that I see people doing is using formatting pure formatting to substitute heading so you know like making making it bolder making it bigger making it color just stuff like that it will look okay in the browser but it will not help our readers and we want to help all the readers and what I mean by that I don't know if you're familiar with accessibility the content concept of accessibility how many of you are familiar with it at least a little bit okay I added a bunch of links at the end to get you started and you can always go to WordPress TV search for accessibility and you'll see a bunch of talks and I really suggest you go and you know get familiar with the concept I'm not an accessibility expert but by now I know one thing don't assume everyone uses the web like you do okay so the aim of accessibility is to remove barriers that prevent access to website for people with different abilities just to give you two example people might listen to to a page and not read it or they might browse a page with a keyboard or voice activated commands so using semantic HTML structuring a page correctly is beneficial for everyone so good formatting is not about how it will look ultimately but it's really about making it easier for everyone to access the content and use it the great thing is you don't need to be an expert and you don't need to know anything about accessibility to actually have an accessibility ready website go to the WordPress.org repository theme repository look for accessibility ready theme and someone that knows about accessibility has prepared and reviewed the themes that are made correctly let's say just use it as it is don't change colors sizes how links look like how buttons look like just use it as it is and concentrate on formatting your text for accessibility and maximum readability so we don't have time to go through all the elements you'll see in the formatting bars and to be honest some of them are not really about semantic HTML not pure formatting so and there's a lot of them so we don't have time to see them today I did a bunch of screenshots and it depending on the version of WordPress or Gutenberg we'll get to that in a minute you're using it might look a little bit different in fact I have to redo all the screencast for Gutenberg a few days ago because a lot of things changed this week so it might look a little bit different but don't worry because what you'll see that all the icons are actually standard icons that you probably have already encountered in your life in any text editor you might have been using word open office Google documents the the icons all look the same different ways to formatting in WordPress right now you have let's say three it's not correct you have other ways but for the purpose of the talk we'll stick to the basics use the editor this is what you see now when we go into your post or page that's called the editor you might have heard the classic editor now that we're transitioning at some point to a different text editor you have all the options in a bar or in two bars to be more correct and you might have heard that there's a new editor coming into town have you heard about Gutenberg yes so Gutenberg will become the default editor from next WordPress release right now it's a plug-in you shouldn't miss there's gonna be a talk here at 350 by Matt Cornwell and he'll guide you through the functionality of Gutenberg so make sure to come it's going to be really interesting these two methods have a user interface which is another big word to say you press buttons all right so if you want something to happen you'll press the relevant button and it will happen or you can type the HTML tag in the text editor and we will see how this is the formatting bar today I never know how to use the beam to show stuff sorry but you'll see you if you click on toggle toolbar another tool but will happen will appear and you have the visual mode and the text mode visual as well visual and text will show you the relevant HTML tags that have been used to structure the page in Gutenberg you see a smaller selection of options that will appear once you click into the text where you start a new paragraph you'll see that there are different formatting bars they have different icons and they will appear once they're needed so they're contextual and they're all different you see every selector and every bar has different options depending on the content that inside the block so let's go through some of the options for proper formatting the first one is the paragraph selector is not a paragraph selector anymore I think all it like this it's a paragraph selector in the editor as I mentioned earlier don't use heading not for heading that's what they're reserved for don't use them just because they look nice they mean something to the browser and to the people that browse the internet in a different way that you might be used to but also they're they have a different style so your eyes will go there so use them correctly right the paragraph is the default format you have on your text and preformatted can be used to insert code in your text and this is a screenshot from the actual editor that we have on Gutenberg the procedure is a little bit different so you have two options either you write a paragraph and then you turn it into something else or you start a new block with the something else that you want Gutenberg introduced also some new fun stuff like verse and subheading just you should just explore and have fun as you can see the headings well at some point in the loop you'll see it Gutenberg gives us only three options heading two heading three heading four which are basically the most common if you think of a structure then you'll see that it's quite you won't go as deep as h5 or h6 unless it's a super structured text you're writing and the HTML tags again refrain from using h1 because it is reserved to the post and the page title and it's better not to use it both for SEO and accessibility I added some links at the end that will explain why pre is the pre-formatted text tag and P is the paragraph if you go into text mode you won't see the P element because that's the default element in WordPress so it you won't see it in the text editor but it's there if you go see the source of the page in your browser you'll see it there and this is the final result doesn't matter what kind of formatting you're using you have your headlines you have your pre-formatted text and you have your regular paragraph bold and italic so bold is used to draw attention so please don't make a whole paragraph bold because otherwise I don't know what's important right say if you use it to make one word stand out or a shorter sentence instead of longer sentence but if everything is important nothing is important and I will just go to the next paragraph now italic has different rules in different language languages for example in Italian we use it to highlight words that are not in Italian so please first check with your third grade teacher and then use italic don't abuse it italic is very hard to read most almost for everyone but for people with reading impairments it's really confusing because it blends words together so use it don't abuse it they're pretty straightforward you just highlight the word you want to put in bold or italic click the button and it will happen you can do this with HTML these are the corresponding tags and this is the result as you can see italic is really hard to read especially in the sans serif font it will take you like a few milliseconds to get there so unless this is really vital or it needs to be italic because our third grade teacher said so refrain from using it and really don't make the whole thing italic list list or another thing that really works well in in web text because it appears to the left side of our brain the analytical side so we'll see things going step by step you have two different kind of lists in WordPress in HTML to be honest which has ordered list or unordered list ordered list or numbered list you'll use them when the items need to be in a specific order and bulleted or unordered list you can use them when the items don't need to be in a specific order you can either turn a text into a list to just make sure every item is in a new paragraph and not a new line and then you just highlight it and press the corresponding button ordered or unordered list or you can start a new paragraph and start a new list again pressing the corresponding button and you'll start a new list same goes for Gutenberg and you see when you start putting your mouse inside the paragraph you'll see different bars popping up depending on what you want to do but again you can do it both ways either start a new paragraph with the list or turn an existing paragraph into a list this is the corresponding HTML you see oh L ordered list you L unordered list and every list item as a li tag and you see the opening tags and to see the closing tags I never know what that's called in English it's a reverse slash a what a forward slide well I have forward that is going backwards anyway call it whatever you want this is what it looks like a block quote is another element that is often me you misused because it looks pretty it looks really pretty in everything I ever used they put some really nice touches into the block quote element it's usually you know a different font and it might have another element that I have no idea what it's called in English though oh that's so easy it makes so much sense I don't know why in Italian it's not like that so you have the quotes and it looks nice but that's not it's intended use the intended use is actually to add a quote inside your text a non-semantic use of this element has been deprecated since HTML 4.0 that was about 20 years ago or something like that so if you want to use it for presentation of purposes don't use it for an actual quote in the editor you simply highlight the paragraph you want to turn into a quote press the button turn it into a quote in Gutenberg is really fun you have a bunch of options you have different styles again you can either turn a paragraph into a quote or start a new block as a quote you have two different styles and the thing I really think it's really cool they introduced is the site element the citation which is a good reminder to give credit where credit is used so you know if we pick a quote from somewhere you should add the author so this is how it looks like when you see the mouse going into a gray bar this is how you had a new block in Gutenberg by the way if you were wondering the HTML is a little bit more complex because if you also want to add the citation you need a different element but again now you know what it looks like it makes sense block quote site it you don't really have to guess and this is the final result you see it's really pretty this is why a lot of people use misuse it alignment is not really an HTML element is actually CSS class added to a regular paragraph and and beside the technical side of it I strongly suggest you stick to left alignment there's a reason for this so centered and justified looks really good on print but they're very hard to read on the web so if your language is left to right like English is stick to left alignment you don't need to do anything the reason why is because when you write a text with your left alignment it will create a straight edge on the left side of your text so the eyes will always find the starting point of the new line it makes it easier and faster to read when you have a center text the line starts in new place every time so it's slower and for people were reading impairments is really difficult so unless it's vital stick to left to right you don't have to do anything left to right is the default mode in WordPress if your language is English again if your language is right to left then the default alignment is going to be right to left if you must just highlight the part the paragraph that you want to align and press the corresponding button up is the editor down as Gutenberg and this is the final result I have to admit I'm a known abuser of strike through I love strike through I use it to be sarcastic that's not how you should use it that's a semantic element okay so in fact what the Dell that we call it strike through but the HTML element is called delete Dell and it actually says that a portion of the test the text has been deleted no and the browser will render it as a strike through but the meaning of it is deleted text highlighted strike through delete and you done you can see the real intended use of this element if you go into the text mode you'll see that at a timestamp do you see the timestamp this is when the text was deleted so that's how you should do it if you want to create a presentational element that will strike through your word you should do that in CSS if you don't have to skill the skills to do it it's okay keep coming to work Campbell you learn it but while you do just use it but don't abuse it again because I I do I do this that's terrible I wanted to skip this one don't color text don't color the text okay because we install a theme it has a series of fonts sizes and colors that were created for you in this beautiful palette and then you go and bang you introduce a color that has nothing to do with the palette that was you know well designed for you where press website or for any website if there's some reason you really need to do this but honestly try not to do this I added this slide just to show you what not to do select a portion of the text that you want to color and press the corresponding the corresponding coloring Gutenberg you'll find a lot more options this is one thing that I'm not super fond of the new editor because this presents itself so so many means use but one cool thing is that you can color the background so if you want to do a call to action with a different background to you know highlight some content you do that just make sure that the text color is going to have a good contrast on the background so it's going to be readable there are a number of common annoyances it will happen and happen to the best of us and I don't count myself into the best of us so it will happen to you too now you know what to do with that because you know what an HTML element look like so you can move it around if you need to first elements let's say you have a block quote and you want to start a new list inevitably the list is going to go inside the block quote and that's not what you want so instead of cursing at your screen which is like what I normally do keep your cool go to the next editor move the block the closing tag for the block quote after the quote itself and then the list is going to be in its own element same goes for actually on Gutenberg is much easier just to do a new element a new block sorry so that's how you solve it paragraph versus new line you know when you click enter and you get a new paragraph like now I just want a new line I want to start something new but not a new paragraph click enter you'll get a new paragraph click shift enter you get a new line that's true also for most of the text editor you're going to use also Google documents so that's a good one to know in Gutenberg it will start a new paragraph so a new block when you hit enter so just do shift enter if you want to start a new line and finally get me out of this list this is also very common you have a list you get to the last item you want to add something more you don't want another item in your list but you still blocked in that list again please press twice enter I'll get you get out of there you'll see you see the animation so that's where you start if if you don't want to do it with enter you just go to the text editor and start the text after the closing tag of the list same goes for Gutenberg this actually changed this week so this slide was completely different now you can do this also in Gutenberg click twice and you'll get out of there lots of links lots of links because I'm obsessed with this topic because I hate it when I go into website and it's a wall of text I'm like what do you want me to do I really want to read you but no way I'm gonna do this I'm too lazy to read this incredible amount of words tell me what are the important things show me a heading show me a list so yeah there's a lot of reading material a little bit about the history a little bit about accessibility and a little bit more I already uploaded the slides so if you go to Twitter and you check at Francesca Marano you'll see the slides I really hope this talk was useful to you and you'll join me in making the web more readable place for everyone if you have questions I think I have time for a couple otherwise I'll be at the happiness bar otherwise I'll be at the side ground booth for the whole weekend so just come and be obsessed with me thank you I because I always write to the whole to hold the link not just as a clickable because I'm not always sure the exporting of the PDF will work so worst thing worse you can just type in into your browser usually PDF exporting does well with links but not always so that's just my preference yes I'm closer I'm gonna do also a bit of mic running yes rebuild your website today should you use the editor or the Gutenberg that's a tough question I want to be diplomatic that's how you say it I love the classic editor because I'm used to it I've been using it for 10 years so I don't really have to look what I'm doing but I think Gutenberg has a lot of potential and I think especially if you like a UI when your user interface when you do stuff I think it's great and for a new user if you get used to it I don't think you'll ever want to go back to the classic editor it's just the old boring people like me that were used to that and we have a bit of a hard time accepting change the HT well Gutenberg adds a lot of inline CSS but yeah DHTML is always HTML it has been for 26 years and it's going to be for the rest of our life hopefully anyone else no okay so I'll wait for you at the happiness bar if you want and thank you for being with me